/*
 * Zerospace
 */
@font-face {
    font-family: 'Zerospace';
    src: url('http://static.merixstudio.com/fonts/zerospace.eot?b3f80d6e7574');
    src:
         url('http://static.merixstudio.com/fonts/zerospace.eot?b3f80d6e7574') format('embedded-opentype'),
         url('http://static.merixstudio.com/fonts/zerospace.ttf?b3f80d6e7574') format('truetype');
}


@font-face {
    font-family: 'Titillium';
    src: url('http://static.merixstudio.com/fonts/titillium_700.eot?49fa8ba975c5');
    src: url('http://static.merixstudio.com/fonts/titillium_700.eot?&49fa8ba975c5#iefix') format('embedded-opentype'),
         url('http://static.merixstudio.com/fonts/titillium_700.ttf?49fa8ba975c5') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Titillium';
    src: url('http://static.merixstudio.com/fonts/titillium_600.eot?49fa8ba975c5');
    src: url('http://static.merixstudio.com/fonts/titillium_600.eot?&49fa8ba975c5#iefix') format('embedded-opentype'),
         url('http://static.merixstudio.com/fonts/titillium_600.ttf?49fa8ba975c5') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Titillium';
    src: url('http://static.merixstudio.com/fonts/titillium_400.eot?49fa8ba975c5');
    src: url('http://static.merixstudio.com/fonts/titillium_400.eot?&49fa8ba975c5#iefix') format('embedded-opentype'),
         url('http://static.merixstudio.com/fonts/titillium_400.ttf?49fa8ba975c5') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Titillium';
    src: url('http://static.merixstudio.com/fonts/titillium_200.eot?49fa8ba975c5');
    src: url('http://static.merixstudio.com/fonts/titillium_200.eot?&49fa8ba975c5#iefix') format('embedded-opentype'),
         url('http://static.merixstudio.com/fonts/titillium_200.ttf?49fa8ba975c5') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Titillium';
    src: url('http://static.merixstudio.com/fonts/titillium_100.eot?49fa8ba975c5');
    src: url('http://static.merixstudio.com/fonts/titillium_100.eot?&49fa8ba975c5#iefix') format('embedded-opentype'),
         url('http://static.merixstudio.com/fonts/titillium_100.ttf?49fa8ba975c5') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Titillium';
    src: url('http://static.merixstudio.com/fonts/titillium_900.eot?49fa8ba975c5');
    src: url('http://static.merixstudio.com/fonts/titillium_900.eot?&49fa8ba975c5#iefix') format('embedded-opentype'),
         url('http://static.merixstudio.com/fonts/titillium_900.ttf?49fa8ba975c5') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'iconvault';
    src: url('http://static.merixstudio.com/fonts/icons.eot?eb6ec2abab61');
    src: url('http://static.merixstudio.com/fonts/icons.eot?&eb6ec2abab61#iefix') format('embedded-opentype'),
         url('http://static.merixstudio.com/fonts/icons.ttf?eb6ec2abab61') format('truetype'),
         url('http://static.merixstudio.com/fonts/icons.svg?eb6ec2abab61') format('svg');
    font-weight: 400;
    font-style: normal;
}

[class*=icon-]:before {
    font-family: 'iconvault';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    text-decoration: inherit;
}

/* ----------------- Very important! --------------------- */

/* Same as icon-hexagon-border */
ol>li:before {content: '\e616'; font-family: 'iconvault'}

/* Same as icon-bullet */
ul.features>li:before,
.wysiwyg ul>li:before {content: '\e606'; font-family: 'iconvault'}

/* Same as icon-quote */
blockquote:before {content: '\e62c'; font-family: 'iconvault'}

/* Same as icon-slash */
nav.sub-menu ul>li+li:before,
.slash:before {content: '\e630'; font-family: 'iconvault'}

/* Same as icon-arrow-left and icon-arrow-right */
.tagline>div>ul:before {content: '\e601'; font-family: 'iconvault'}
.tagline>div>ul:after {content: '\e602'; font-family: 'iconvault'}

/* ----------------- Very important! --------------------- */

.icon-chevron-up:before {content: "\e912"}
.icon-chevron-down:before {content: "\e913"}
.icon-angular:before {content: "\e63c"}
.icon-arrow-down:before {content: "\e600"}
.icon-arrow-left:before {content: "\e601"}
.icon-arrow-right:before {content: "\e602"}
.icon-arrow-up:before {content: "\e603"}
.icon-aws:before {content: "\e604"}
.icon-behance:before {content: "\e605"}
.icon-bullet:before {content: "\e606"}
.icon-close:before {content: "\e607"}
.icon-css2:before {content: "\e608"}
.icon-css3:before {content: "\e609"}
.icon-debian:before {content: "\e60a"}
.icon-design:before {content: "\e60b"}
.icon-django:before {content: "\e60c"}
.icon-dribbble:before {content: "\e60d"}
.icon-drupal:before {content: "\e60e"}
.icon-facebook:before {content: "\e60f"}
.icon-flickr:before {content: "\e610"}
.icon-folder:before {content: "\e611"}
.icon-gears:before {content: "\e612"}
.icon-globe:before {content: "\e900"}
.icon-google-plus:before {content: "\e613"}
.icon-hexagon:before {content: "\e614"}
.icon-hexagon2:before {content: "\e615"}
.icon-hexagon-border:before {content: "\e616"}
.icon-hexagon-border-quote:before {content: "\e617"}
.icon-house:before {content: "\e618"}
.icon-html4:before {content: "\e619"}
.icon-html5:before {content: "\e61a"}
.icon-ionic:before {content: "\e801"}
.icon-instagram:before {content: "\e802"}
.icon-javascript:before {content: "\e61b"}
.icon-jquery:before {content: "\e61c"}
.icon-layout:before {content: "\e61d"}
.icon-linkedin:before {content: "\e61e"}
.icon-magento:before {content: "\e61f"}
.icon-magic:before {content: "\e620"}
.icon-mail:before {content: "\e621"}
.icon-menu:before {content: "\e622"}
.icon-mercurial:before {content: "\e623"}
.icon-merix:before {content: "\e624"}
.icon-merix-inverted:before {content: "\e625"}
.icon-mongodb:before {content: "\e63f"}
.icon-mysql:before {content: "\e626"}
.icon-nodejs:before {content: "\e63b"}
.icon-pad:before {content: "\e627"}
.icon-pdf:before {content: "\e628"}
.icon-phone:before {content: "\e629"}
.icon-phonegap:before {content: "\e62a"}
.icon-php:before {content: "\e62b"}
.icon-python:before {content: "\e914"}
.icon-react:before {content: "\e800"}
.icon-quote:before {content: "\e62c"}
.icon-rwd:before {content: "\e62d"}
.icon-salesforce:before {content: "\e641"}
.icon-share:before {content: "\e62e"}
.icon-skype:before {content: "\e62f"}
.icon-slash:before {content: "\e630"}
.icon-solr:before {content: "\e631"}
.icon-symfony:before {content: "\e640"}
.icon-team-member:before {content: "\e632"}
.icon-twitter:before {content: "\e633"}
.icon-user-talk:before {content: "\e634"}
.icon-ux:before {content: "\e635"}
.icon-vector:before {content: "\e636"}
.icon-webgl:before {content: "\e642"}
.icon-websocket:before {content: "\e63d"}
.icon-wordpress:before {content: "\e637"}
.icon-xhtml:before {content: "\e638"}
.icon-xml:before {content: "\e639"}
.icon-zend:before {content: "\e63a"}

.icon-code-review:before {content: "\e901"}
.icon-communication:before {content: "\e902"}
.icon-experienced-employee:before {content: "\e904"}
.icon-leadership:before {content: "\e909"}
.icon-productivity:before {content: "\e90d"}
.icon-time-managment:before {content: "\e90f"}
.icon-advanced-skills:before {content: "\e910"}
.icon-basic-skills:before {content: "\e911"}

.icon-english-lessons:before {content: "\e903"}
.icon-remote-work:before {content: "\e90e"}
.icon-multisport:before {content: "\e90a"}
.icon-fruits:before {content: "\e90b"}
.icon-parties:before {content: "\e90c"}
.icon-flexible-hours:before {content: "\e906"}
.icon-games:before {content: "\e907"}
.icon-external-courses:before {content: "\e905"}
.icon-internal-courses:before {content: "\e908"}
/*! normalize.css v2.1.0 | 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 styling not present in IE 8/9.
 */

[hidden] {
    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 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address 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 {
    -moz-box-sizing: content-box;
    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: "\201C" "\201D" "\2018" "\2019";
}

/**
 * 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"], /* 1 */
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.
 * 2. Remove excess padding in IE 8/9.
 */

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 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 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;
}

/*
 * Base styles
 */
* {margin: 0; padding: 0; text-overflow: ellipsis; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
body * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
[class] {overflow: hidden; list-style: none; padding: 0}

/* Page defaults */
html {overflow-x: hidden !important; overflow-y: scroll !important; height: 100%; background: #fff}
body {overflow: visible !important; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; width: 100%; min-width: 300px; max-width: 1920px; margin: auto; padding-top: 107px !important; background: #fff; color: #646464; font: 16px/1.5 /* 18px */ 'Titillium', 'Arial', 'Helvetica', sans-serif}


@media (min-width: 1920px) {
    html {background: #666}
    html:before {content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 1920px; margin: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.75); background: #fff}
}

@media (max-width: 767px) {
    body {padding-top: 67px !important}
}

/* Block-level elements */
*+p,
*+dl,
*+h1,
*+h2,
*+h3,
*+h4,
*+h5,
*+h6,
*+ol,
*+ul,
*+figure {margin-top: 28px}

ol,
ul {margin-left: 0; padding-left: 24px}

li ol,
li ul {margin-top: 0; margin-bottom: 0}

h1,
h3,
h4,
h5,
h6 {font-size: 12px}

h2 {margin-top: 0; margin-bottom: 35px; color: #000; font-size: 36px; font-weight: 200; line-height: 1}
*+h2 {margin-top: 60px}

.h2 {margin-top: 0; margin-bottom: 35px; color: #000; font-size: 36px; font-weight: 200; line-height: 1}
*+.h2 {margin-top: 60px}

@media (max-width: 767px) {
    h2 {font-size: 30px}
    .h2 {font-size: 30px}
}

h3 {margin-bottom: 35px; color: #000; font-size: 26px; font-weight: 200; line-height: 1}
*+h3 {margin-top: 50px}

dt {font-weight: 700}

table {overflow: visible !important}

/* Form elements */
input,
button,
select,
textarea {vertical-align: middle; outline: none}

textarea[class] {overflow: auto}

button,
select,
label[for],
input[type="reset"],
input[type="radio"],
input[type="button"],
input[type="submit"],
input[type="checkbox"] {cursor: pointer}

/* Inline elements */
a {color: #d97d34; text-decoration: none; cursor: pointer}
a:hover {text-decoration: underline}

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

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

@media (max-width: 479px) {
	.text-center--mobile {text-align: center;}
}
/*
 * Some useful classes
 */

/* Disable scrollbar */
html.no-scroll {overflow: hidden !important}

/* Mark elements as not finished (when integrating with backend). */
._placeholder {outline: 2px dashed rgba(255, 0, 255, .33) !important}

/*!
Video.js Default Styles (http://videojs.com)
Version 4.2.1
Create your own skin at http://designer.videojs.com
*/
/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
.video-js * {overflow: visible}
.vjs-default-skin {
  color: #cccccc;
}
/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/
@font-face {
  font-family: 'VideoJS';
  src: url('http://static.merixstudio.com/fonts/vjs.eot?50871177797d');
  src: url('http://static.merixstudio.com/fonts/vjs.eot?&50871177797d#iefix') format('embedded-opentype'), url('http://static.merixstudio.com/fonts/vjs.woff?50871177797d') format('woff'), url('http://static.merixstudio.com/fonts/vjs.ttf?50871177797d') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
  /* Replace browser focus hightlight with handle highlight */
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  /* background-color-with-alpha */
  background-color: #333333;
  background-color: rgba(51, 51, 51, 0.9);
}
.vjs-default-skin .vjs-slider:focus {
  /* box-shadow */
  -webkit-box-shadow: 0 0 2em #ffffff;
  -moz-box-shadow: 0 0 2em #ffffff;
  box-shadow: 0 0 2em #ffffff;
}
.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}
.vjs-default-skin .vjs-slider-handle:before {
  content: '';
  position: absolute;
  top: -0.5em;
  left: -0.5em;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  background: #fff;
}
/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
*/
.vjs-default-skin .vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
     If you want more margin below the control bar, add more height. */
  bottom: 0;
  /* Use left/right to stretch to 100% width of player div */
  left: 0;
  right: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
}
/* Show the control bar only once the video has started playing */
.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */

  visibility: visible;
  opacity: 1;
  /* transition */
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s;
}
/* Hide the control bar when the video is playing and the user is inactive  */
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* transition */
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
  display: none;
}
.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
  display: none;
}
/* IE8 is flakey with fonts, and you have to change the actual content to force
fonts to show/hide properly.
  - "\9" IE8 hack didn't work for this
  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/
@media \0screen {
  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: "";
  }
}
/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em;
}
/* FontAwsome button icons */
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em #ffffff;
}
.vjs-default-skin .vjs-control:focus {
  /*  outline: 0; */
  /* keyboard-only users cannot see the focus on several of the UI elements when
  this is set to 0 */

}
/* Hide control text visually, but have it available for screenreaders */
.vjs-default-skin .vjs-control-text {
  /* hide-visually */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-play-control {
  width: 5em;
  cursor: pointer;
}
.vjs-default-skin .vjs-play-control:before {
  content: "\e001";
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e002";
}
/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right;
}
.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e006";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005";
}
.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right;
}
.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em;
}
.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  background: #dc8642;
}
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
}
.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em;
}
/* Progress
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;
  /* Shrink the bar slower than it grows. */
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
/* On hover, make the progress bar grow to something that's more clickable.
    This simply changes the overall font for the progress bar, and this
    updates both the em-based widths and heights, as wells as the icon font */
.vjs-default-skin:hover .vjs-progress-control {
  font-size: .9em;
  /* Even though we're not changing the top/height, we need to include them in
      the transition so they're handled correctly. */

  /* transition */
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  height: 100%;
}
/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}
.vjs-default-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprisingly works in IE8.
      Created using http://www.patternify.com
    Changing the first color value will change the bar color.
    Also using a paralax effect to make the lines move backwards.
      The -50% left position makes that happen.
  */

  background: #dc8642;
}
.vjs-default-skin .vjs-load-progress {
  background: #646464 /* IE8- Fallback */;
  background: rgba(255, 255, 255, 0.4);
}
.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%;
}
.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em /* Minor adjustment */;
}
/* Time Display
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em;
}
.vjs-default-skin .vjs-current-time {
  float: left;
}
.vjs-default-skin .vjs-duration {
  float: left;
}
/* Remaining time is in the HTML, but not included in default design */
.vjs-default-skin .vjs-remaining-time {
  display: none;
  float: left;
}
.vjs-time-divider {
  float: left;
  line-height: 3em;
}
/* Fullscreen
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right;
}
.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e000";
}
/* Switch to the exit icon when the player is in fullscreen */
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b";
}
/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
.vjs-default-skin .vjs-big-play-button {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  z-index: 2;
  position: absolute;
  cursor: pointer;
  opacity: 1;
}
/* Hide if controls are disabled */
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none;
}
/* Hide when video starts playing */
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
  display: none;
}
.vjs-default-skin.vjs-has-started.vjs-paused .vjs-big-play-button {
  display: block;
}
/* Hide on mobile devices. Remove when we stop using native controls
    by default on mobile  */
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none !important;
}
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
}
.vjs-default-skin .vjs-big-play-button:after {
  content: "\e001";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */

  line-height: 100px;
  font-size: 3.5em;
  text-align: center /* Needed for IE8 */;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  color: #fff;
}

.vjs-default-skin .vjs-big-play-button:before {
  line-height: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  font-size: 124px;
  text-align: center;
  color: #d97d34;
}

.vjs-default-skin:hover .vjs-big-play-button:before,
.vjs-default-skin .vjs-big-play-button:focus:before {
  color: #ce6f2e;
}
/* Loading Spinner
--------------------------------------------------------------------------------
*/
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 5em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
  /* animation */
  -webkit-animation: spin 1.5s infinite linear;
  -moz-animation: spin 1.5s infinite linear;
  -o-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}
.vjs-default-skin .vjs-loading-spinner:before {
  content: "\e00a";
  font-family: VideoJS;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
/* Menu Buttons (Captions/Subtitles/etc.)
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer;
}
.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em;
  /* (Width of vjs-menu - width of button) / 2 */

  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid #000000;
  /* Same width top as ul bottom */

  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */

}
/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  /* Same bottom as vjs-menu border-top */

  max-height: 15em;
  overflow: auto;
  left: -5em;
  /* Width of menu - width of button / 2 */

  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  /* box-shadow */
  -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
}
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
  display: block;
}
.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000;
}
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
  outline: 0;
  color: #111;
  /* background-color-with-alpha */
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em #ffffff;
  -moz-box-shadow: 0 0 1em #ffffff;
  box-shadow: 0 0 1em #ffffff;
}
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}
/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before {
  content: "\e00c";
}
/* Captions Button */
.vjs-default-skin .vjs-captions-button:before {
  content: "\e008";
}
/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em #ffffff;
  -moz-box-shadow: 0 0 1em #ffffff;
  box-shadow: 0 0 1em #ffffff;
}
/*
REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and
     easily calculable. */

  font-size: 10px;
  /* Allow poster to be vertially aligned. */

  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/

  /* Provide some basic defaults for fonts */

  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */

  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */

  /* user-select */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Playback technology elements expand to the width/height of the containing div
    <video> or <object> */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   checking fullScreenEnabled. */
.video-js:-moz-full-screen {
  position: absolute;
}
/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  overflow-y: auto;
}
.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  /* IE6 full-window (underscore hack) */
  _position: absolute;
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}
/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}
/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
  display: none;
}
/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  /* Leave padding on left and right */
  left: 1em;
  right: 1em;
}
/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  /* background-color-with-alpha */
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
}
.video-js .vjs-subtitles {
  color: #ffffff /* Subtitles are white */;
}
.video-js .vjs-captions {
  color: #ffcc66 /* Captions are yellow */;
}
.vjs-tt-cue {
  display: block;
}
/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden {
  display: none;
}
.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}
/* -----------------------------------------------------------------------------
The original source of this file lives at
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */

/*
 * Header
 */
body>header {position: relative; z-index: 3; overflow: hidden; height: 107px; margin-top: -107px; padding: 0 196px 0 66px !important; border-bottom: 1px solid #d7d7d7; background: #f7f7f7}
body>header.hidden {overflow: hidden !important}
body>header:after {content: ''; clear: both; display: block}
body>header p.logo {float: left; padding: 14px 0}
body>header p.logo a {overflow: hidden; display: block; width: 224px; height: 76px; background: transparent url('http://static.merixstudio.com/images/merix_logo_text.svg?ef7c53cb44d2') no-repeat 0 50%;line-height: 76px; text-indent: 100%; white-space: nowrap; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease}
body>header p.logo a:focus {outline: none}
body>header p.logo a:hover {opacity: 0.5; outline: none}

body>header a.menu-toggle {display: none; position: absolute; top: 15px; left: 15px; width: 35px; height: 35px}
body>header a.menu-toggle:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 35px; line-height: 35px}
body>header a.menu-toggle:hover {text-decoration: none}

@media (max-width: 1279px) {
    body>header {padding-left: 20px !important}
    body>header p.logo {padding: 20px 0}
    body>header p.logo a {width: 66px; height: 66px; padding: 0; background: transparent url('http://static.merixstudio.com/images/merix_logo_icon.svg?ef7c53cb44d2') no-repeat 50% 50%; background-size: auto 53px}
}

@media (max-width: 767px) {
    body>header {overflow: visible !important; position: relative; z-index: 100; height: 67px; margin-top: -67px; padding: 0 !important; text-align: center}
    body>header a.menu-toggle {display: block}
    body>header p.logo {float: none; display: inline-block; padding: 0; vertical-align: top}
}


/*
 * Main menu
 */
nav.main-menu {float: right; font-size: 18px; line-height: 1; text-transform: lowercase}
nav.main-menu ul {overflow: hidden; padding: 0; list-style: none}
nav.main-menu ul li {float: left}
nav.main-menu ul li a {display: block; padding: 43px 34px; color: #000}
nav.main-menu ul li a.active {color: #d97d34}
nav.main-menu ul li a:focus,
nav.main-menu ul li a:hover {color: #d97d34; text-decoration: none; outline: none}

nav.main-menu {-webkit-transition: bottom 0.5s ease; transition: bottom 0.5s ease}
nav.main-menu ul li a {-webkit-transition: color 0.25s ease; transition: color 0.25s ease}


/*
 * Secondary menu
 */
nav.secondary-menu {overflow: visible; position: absolute; top: 0; right: 66px; bottom: 0; padding-right: 10px; background: #fff}
nav.secondary-menu>div {position: relative; overflow: hidden; height: 100%; width: 70px}
nav.secondary-menu>div ul {float: right; line-height: 106px}
nav.secondary-menu:before {content: ''; position: absolute; top: 0; left: -35px; bottom: 0; border-right: 35px solid #d7d7d7; border-top: 53px solid transparent; border-bottom: 53px solid transparent}
nav.secondary-menu:after {content: ''; position: absolute; top: 0; left: -34px; bottom: 0; border-right: 35px solid #fff; border-top: 53px solid transparent; border-bottom: 53px solid transparent}

nav.secondary-menu>div {-webkit-transition: width 0.25s ease; transition: width 0.25s ease}

nav.secondary-menu:hover>div {width: auto}
nav.secondary-menu:hover span,
nav.secondary-menu:hover span:hover {color: #fff}


/*
 * Social icons
 */
ul.social-icons {white-space: nowrap}
ul.social-icons li {display: inline-block; vertical-align: middle; cursor: default}
ul.social-icons li>* {overflow: hidden; display: block; width: 40px; height: 40px; padding: 5px; color: #646464; font-size: 12px; font-weight: 700; line-height: 30px; text-indent: 200%; text-overflow: clip; white-space: nowrap}
ul.social-icons li>*:active,
ul.social-icons li>*:hover {color: #d97d34; text-decoration: none; outline: none}
ul.social-icons li>*.text {text-indent: 0; text-align: center}
ul.social-icons li>*:before {display: block; width: 30px; height: 30px; font-size: 22px; text-indent: 0; text-align: center; line-height: 30px}
ul.social-icons li>.icon-share:before {font-size: 30px}

ul.social-icons li>* {-webkit-transition: color 0.25s ease; transition: color 0.25s ease}

@media (max-width: 1279px) {
    nav.main-menu ul li a {padding-left: 20px; padding-right: 20px}
}

@media (max-width: 1023px) {
    body>header p.featured {margin-right: -20px}

    nav.main-menu ul li a {padding: 45px 14px; font-size: 16px}
    nav.main-menu ul li.featured a {padding-left: 38px; padding-right: 38px}
}

@media (max-width: 767px) {
    body>header p.featured {position: absolute; right: 0; top: 0; margin: 0}
    body>header p.featured a {height: 66px; width: 42px; padding: 0; background: transparent url('http://static.merixstudio.com/images/main_menu_featured_background_small.png?4140c0efe4e7') no-repeat 0 0}

    nav.main-menu {overflow: auto; display: none; float: none; margin: 0; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; background: #fff; font-size: 24px; font-weight: 200}
    nav.main-menu ul li {float: none}
    nav.main-menu ul li a {padding: 28px}
    nav.main-menu ul li+li {border-top: 1px solid #dadada}

    nav.secondary-menu {position: static; display: none; padding: 0}
    nav.secondary-menu>div {width: auto !important; height: 100px}
    nav.secondary-menu>div ul {float: none}

    body>header.menu-open {height: auto}
    body>header.menu-open nav.main-menu {display: block}
    body>header.menu-open nav.secondary-menu {display: block}
}

@media (max-width: 360px) {
    nav.secondary-menu>div {height: auto}
    ul.social-icons {white-space: normal}
}


/*
 * "Special" button with icon linking to game.
 */
.special {position: absolute; top: 0; right: 0; margin: 0; color: #fff}
.special:before {content: ''; position: absolute; top: 50%; left: 0; border-left: 30px solid #fff; border-top: 53px solid transparent}
.special:after {content: ''; position: absolute; bottom: 50%; left: 0; border-left: 30px solid #fff; border-bottom: 53px solid transparent}
.special a:focus,
.special a:hover {text-decoration: none; outline: none}
.special a {position: relative; display: block; width: 66px; height: 106px; text-indent: 66px; text-overflow: clip; white-space: nowrap}
.special a:before {position: absolute; top: 50%; right: 1px; width: 50px; height: 50px; margin: -25px 0 0 0; color: #fff; font-size: 44px; line-height: 50px; text-indent: 0; text-align: center; text-shadow: 2px 2px 2px rgba(0, 0, 0, .07)}

.special {
    background: #e09531;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UwOTUzMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNTY5NDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e09531), color-stop(100%, #d56942));
    background-image: -webkit-linear-gradient(top, #e09531 0%, #d56942 100%);
    background-image: linear-gradient(to bottom, #e09531 0%, #d56942 100%);
}

@media (max-width: 767px) {
    .special a {height: 66px}
    .special:before,
    .special:after {border-left-color: rgb(247, 247, 247)}
}

/*
 * Footer
 */
body>footer {position: relative; z-index: 100; padding: 0 66px; border-top: 1px solid #d7d7d7; background: #fff; font-size: 12px}
body>footer.hidden {overflow: hidden}
body>footer:after {content: ''; display: block; clear: both}
body>footer p {float: left; margin-right: 60px; padding: 19px 0; color: #a4a4a4}
body>footer nav.footer-menu {float: left}
body>footer ul.footer-icons {float: right; margin: 0}

@media (max-width: 1023px) {
    body>footer {padding-left: 20px; padding-right: 20px}
    body>footer ul.footer-icons li {margin: 0 5px}
}

@media (max-width: 767px) {
    body>footer {text-align: center}
    body>footer p {float: none; margin: 0}
    body>footer nav.footer-menu {float: none}
    body>footer ul.footer-icons {float: none}
}


/*
 * Grid
 */
.grid {font-family: 'Zerospace'; font-size: 0}
.grid>* {display: inline-block; margin: 0; font-family: 'Titillium', 'Arial', 'Helvetica', sans-serif; font-size: 16px; vertical-align: top}
.grid.bottom>* {vertical-align: bottom}
.grid.middle>* {vertical-align: middle}

.grid.padding {margin: -30px 0 0 -30px}
.grid.padding>* {padding: 30px 0 0 30px}

.grid.padding.tiny {margin: -1px 0 0 -1px}
.grid.padding.tiny>* {padding: 1px 0 0 1px}

.grid.padding.small {margin: -10px 0 0 -10px}
.grid.padding.small>* {padding: 10px 0 0 10px}

.grid.padding.big {margin: -50px 0 0 -50px}
.grid.padding.big>* {padding: 50px 0 0 50px}

/*
 * Tagline
 */
.tagline {clear: both; position: relative; height: 55%; margin-top: -87px; padding: 0; border-bottom: 1px solid #d7d7d7; background: #fff; color: #000; font-size: 80px; font-weight: 100; line-height: 1.2em; text-align: center; letter-spacing: -5px; white-space: nowrap; text-overflow: clip}
.tagline>div {position: absolute; top: 50%; left: 0; right: 0; margin: -0.6em auto 0}
.tagline>div>ul {display: inline-block; position: relative; padding: 0; list-style: none; cursor: default; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none}
.tagline>div>ul:before,
.tagline>div>ul:after {color: #dadada; font-size: 2em}
.tagline>div>ul.hotspots {position: absolute; top: 0; left: 0; right: 0; margin: 0}
.tagline>div>ul>li {overflow: hidden; display: inline-block; height: 1.2em; vertical-align: top}
.tagline>div>ul>li.main-tag {width: 0; margin-right: -10px}
.tagline>div>ul>li>span {float: left; vertical-align: top; -webkit-transition: color 0.5s ease; transition: color 0.5s ease}
.tagline>div>ul>li.active>span {color: #d97d34}
.tagline>div>ul>li.alt>span {color: #d97d34}
.tagline>div>ul>li>div {position: relative; float: left; width: 0; vertical-align: top}
.tagline>div>ul>li>div>ul {position: absolute; top: 0; left: 0; overflow: hidden; display: inline-block; padding: 0; list-style: none; text-align: left; vertical-align: top}
.tagline.hidden {border: none}

.tagline-text {margin-top: -37px; padding: 0 16px; color: #ccc; font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: 0; white-space: normal}

@media (max-height: 768px), (max-width: 1599px) {
    .tagline {margin-top: -56px}
    .tagline>div>ul>li.main-tag {margin-right: -5px}
}

@media (max-width: 1023px) {
    .tagline {font-size: 50px; letter-spacing: -2px}
    .tagline-text {margin-top: 0; font-size: 18px}
}

@media (orientation: landscape) and (max-height: 768px) {
    .tagline {font-size: 50px; letter-spacing: -2px}
    .tagline-text {margin-top: 0}
}

@media (orientation: portrait) and (max-width: 767px) {
    .tagline {font-size: 50px}
}

@media (orientation: portrait) and (max-width: 567px) {
    .tagline {font-size: 32px}
}

@media (max-height: 479px) {
    .tagline {font-size: 32px}
}

@media (max-width: 360px) {
    .tagline {font-size: 24px}
}

@media (max-height: 379px) {
    .tagline {position: absolute; left: -100%; width: 0}
}

/*
 * Percentage-based responsive column classes. Hard-coded breakpoints (also configured in scripts/settings.js):
 *
 *     viewport width  settings alias  body class
 *                                     (added automatically by the viewport.js script)
 *     =============== =============== ================================================
 *     0 - 479         '320'           viewport-320
 *     480 - 719       '480'           viewport-480
 *     720 - 959       '720'           viewport-720
 *     960 - 1279      '960'           viewport-960
 *     1280 - 1599     '1280'          viewport-1280
 *     1600 - 1919     '1600'          viewport-1600
 *     1920+           '1920'          viewport-1920
 *
 */
@media (min-width: 320px) and (max-width: 479px) {
    .v320-hide {display: none !important}
}
@media (min-width: 480px) and (max-width: 719px) {
    .v480-hide {display: none !important}
}
@media (min-width: 720px) and (max-width: 959px) {
    .v720-hide {display: none !important}
}
@media (min-width: 960px) and (max-width: 1279px) {
    .v960-hide {display: none !important}
}
@media (min-width: 1280px) and (max-width: 1599px) {
    .v1280-hide {display: none !important}
}
@media (min-width: 1600px) and (max-width: 1919px) {
    .v1600-hide {display: none !important}
}
@media (min-width: 1920px) {
    .v1920-hide {display: none !important}
}

@media (min-width: 320px) {
    .v320-1 {width: 100%}

    .v320-1-of-2 {width: 50%}

    .v320-1-of-3 {width: 33.3333333333%}
    .v320-2-of-3 {width: 66.6666666666%}

    .v320-1-of-4 {width: 25%}
    .v320-2-of-4 {width: 50%}
    .v320-3-of-4 {width: 75%}

    .v320-1-of-5 {width: 20%}
    .v320-2-of-5 {width: 40%}
    .v320-3-of-5 {width: 60%}
    .v320-4-of-5 {width: 80%}

    .v320-1-of-6 {width: 16.6666666666%}
    .v320-2-of-6 {width: 33.3333333333%}
    .v320-3-of-6 {width: 50%}
    .v320-4-of-6 {width: 66.6666666666%}
    .v320-5-of-6 {width: 83.3333333333%}

    .v320-padding           {padding:        10px}
    .v320-padding-top       {padding-top:    10px}
    .v320-padding-left      {padding-left:   10px}
    .v320-padding-right     {padding-right:  10px}
    .v320-padding-bottom    {padding-bottom: 10px}
    .v320-no-padding-top    {padding-top:    0}
    .v320-no-padding-left   {padding-left:   0}
    .v320-no-padding-right  {padding-right:  0}
    .v320-no-padding-bottom {padding-bottom: 0}
}

@media (min-width: 480px) {
    .v480-1 {width: 100%}

    .v480-1-of-2 {width: 50%}

    .v480-1-of-3 {width: 33.3333333333%}
    .v480-2-of-3 {width: 66.6666666666%}

    .v480-1-of-4 {width: 25%}
    .v480-2-of-4 {width: 50%}
    .v480-3-of-4 {width: 75%}

    .v480-1-of-5 {width: 20%}
    .v480-2-of-5 {width: 40%}
    .v480-3-of-5 {width: 60%}
    .v480-4-of-5 {width: 80%}

    .v480-1-of-6 {width: 16.6666666666%}
    .v480-2-of-6 {width: 33.3333333333%}
    .v480-3-of-6 {width: 50%}
    .v480-4-of-6 {width: 66.6666666666%}
    .v480-5-of-6 {width: 83.3333333333%}

    .v480-padding           {padding:        10px}
    .v480-padding-top       {padding-top:    10px}
    .v480-padding-left      {padding-left:   10px}
    .v480-padding-right     {padding-right:  10px}
    .v480-padding-bottom    {padding-bottom: 10px}
    .v480-no-padding-top    {padding-top:    0}
    .v480-no-padding-left   {padding-left:   0}
    .v480-no-padding-right  {padding-right:  0}
    .v480-no-padding-bottom {padding-bottom: 0}
}

@media (min-width: 720px) {
    .v720-1 {width: 100%}

    .v720-1-of-2 {width: 50%}

    .v720-1-of-3 {width: 33.3333333333%}
    .v720-2-of-3 {width: 66.6666666666%}

    .v720-1-of-4 {width: 25%}
    .v720-2-of-4 {width: 50%}
    .v720-3-of-4 {width: 75%}

    .v720-1-of-5 {width: 20%}
    .v720-2-of-5 {width: 40%}
    .v720-3-of-5 {width: 60%}
    .v720-4-of-5 {width: 80%}

    .v720-1-of-6 {width: 16.6666666666%}
    .v720-2-of-6 {width: 33.3333333333%}
    .v720-3-of-6 {width: 50%}
    .v720-4-of-6 {width: 66.6666666666%}
    .v720-5-of-6 {width: 83.3333333333%}

    .v720-padding           {padding:        10px}
    .v720-padding-top       {padding-top:    10px}
    .v720-padding-left      {padding-left:   10px}
    .v720-padding-right     {padding-right:  10px}
    .v720-padding-bottom    {padding-bottom: 10px}
    .v720-no-padding-top    {padding-top:    0}
    .v720-no-padding-left   {padding-left:   0}
    .v720-no-padding-right  {padding-right:  0}
    .v720-no-padding-bottom {padding-bottom: 0}
}

@media (min-width: 960px) {
    .v960-1 {width: 100%}

    .v960-1-of-2 {width: 50%}

    .v960-1-of-3 {width: 33.3333333333%}
    .v960-2-of-3 {width: 66.6666666666%}

    .v960-1-of-4 {width: 25%}
    .v960-2-of-4 {width: 50%}
    .v960-3-of-4 {width: 75%}

    .v960-1-of-5 {width: 20%}
    .v960-2-of-5 {width: 40%}
    .v960-3-of-5 {width: 60%}
    .v960-4-of-5 {width: 80%}

    .v960-1-of-6 {width: 16.6666666666%}
    .v960-2-of-6 {width: 33.3333333333%}
    .v960-3-of-6 {width: 50%}
    .v960-4-of-6 {width: 66.6666666666%}
    .v960-5-of-6 {width: 83.3333333333%}

    .v960-padding           {padding:        10px}
    .v960-padding-top       {padding-top:    10px}
    .v960-padding-left      {padding-left:   10px}
    .v960-padding-right     {padding-right:  10px}
    .v960-padding-bottom    {padding-bottom: 10px}
    .v960-no-padding-top    {padding-top:    0}
    .v960-no-padding-left   {padding-left:   0}
    .v960-no-padding-right  {padding-right:  0}
    .v960-no-padding-bottom {padding-bottom: 0}
}

@media (min-width: 1280px) {
    .v1280-1 {width: 100%}

    .v1280-1-of-2 {width: 50%}

    .v1280-1-of-3 {width: 33.3333333333%}
    .v1280-2-of-3 {width: 66.6666666666%}

    .v1280-1-of-4 {width: 25%}
    .v1280-2-of-4 {width: 50%}
    .v1280-3-of-4 {width: 75%}

    .v1280-1-of-5 {width: 20%}
    .v1280-2-of-5 {width: 40%}
    .v1280-3-of-5 {width: 60%}
    .v1280-4-of-5 {width: 80%}

    .v1280-1-of-6 {width: 16.6666666666%}
    .v1280-2-of-6 {width: 33.3333333333%}
    .v1280-3-of-6 {width: 50%}
    .v1280-4-of-6 {width: 66.6666666666%}
    .v1280-5-of-6 {width: 83.3333333333%}

    .v1280-padding           {padding:        10px}
    .v1280-padding-top       {padding-top:    10px}
    .v1280-padding-left      {padding-left:   10px}
    .v1280-padding-right     {padding-right:  10px}
    .v1280-padding-bottom    {padding-bottom: 10px}
    .v1280-no-padding-top    {padding-top:    0}
    .v1280-no-padding-left   {padding-left:   0}
    .v1280-no-padding-right  {padding-right:  0}
    .v1280-no-padding-bottom {padding-bottom: 0}
}

@media (min-width: 1600px) {
    .v1600-1 {width: 100%}

    .v1600-1-of-2 {width: 50%}

    .v1600-1-of-3 {width: 33.3333333333%}
    .v1600-2-of-3 {width: 66.6666666666%}

    .v1600-1-of-4 {width: 25%}
    .v1600-2-of-4 {width: 50%}
    .v1600-3-of-4 {width: 75%}

    .v1600-1-of-5 {width: 20%}
    .v1600-2-of-5 {width: 40%}
    .v1600-3-of-5 {width: 60%}
    .v1600-4-of-5 {width: 80%}

    .v1600-1-of-6 {width: 16.6666666666%}
    .v1600-2-of-6 {width: 33.3333333333%}
    .v1600-3-of-6 {width: 50%}
    .v1600-4-of-6 {width: 66.6666666666%}
    .v1600-5-of-6 {width: 83.3333333333%}

    .v1600-padding           {padding:        10px}
    .v1600-padding-top       {padding-top:    10px}
    .v1600-padding-left      {padding-left:   10px}
    .v1600-padding-right     {padding-right:  10px}
    .v1600-padding-bottom    {padding-bottom: 10px}
    .v1600-no-padding-top    {padding-top:    0}
    .v1600-no-padding-left   {padding-left:   0}
    .v1600-no-padding-right  {padding-right:  0}
    .v1600-no-padding-bottom {padding-bottom: 0}
}

@media (min-width: 1920px) {
    .v1920-1 {width: 100%}

    .v1920-1-of-2 {width: 50%}

    .v1920-1-of-3 {width: 33.3333333333%}
    .v1920-2-of-3 {width: 66.6666666666%}

    .v1920-1-of-4 {width: 25%}
    .v1920-2-of-4 {width: 50%}
    .v1920-3-of-4 {width: 75%}

    .v1920-1-of-5 {width: 20%}
    .v1920-2-of-5 {width: 40%}
    .v1920-3-of-5 {width: 60%}
    .v1920-4-of-5 {width: 80%}

    .v1920-1-of-6 {width: 16.6666666666%}
    .v1920-2-of-6 {width: 33.3333333333%}
    .v1920-3-of-6 {width: 50%}
    .v1920-4-of-6 {width: 66.6666666666%}
    .v1920-5-of-6 {width: 83.3333333333%}

    .v1920-padding           {padding:        10px}
    .v1920-padding-top       {padding-top:    10px}
    .v1920-padding-left      {padding-left:   10px}
    .v1920-padding-right     {padding-right:  10px}
    .v1920-padding-bottom    {padding-bottom: 10px}
    .v1920-no-padding-top    {padding-top:    0}
    .v1920-no-padding-left   {padding-left:   0}
    .v1920-no-padding-right  {padding-right:  0}
    .v1920-no-padding-bottom {padding-bottom: 0}
}

/*
 * Featured project menu
 */
.featured-project-menu {position: absolute; top: 0; left: 0; bottom: 0; z-index: 3; height: 100%}
.featured-project-menu ul {position: relative; top: 50%; margin-top: -210px; padding: 0; list-style: none}
.featured-project-menu li {position: relative; float: left; clear: left; border-right: 1px solid #fff; border-bottom: 1px solid #fff}
.featured-project-menu li:before {content: ''; position: absolute; bottom: 100%; left: 0; right: -1px; border-top: 1px solid #fff}
.featured-project-menu a {position: relative; overflow: hidden; display: block; width: 140px; height: 140px; background: #000}
.featured-project-menu span.logo {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: visible}
.featured-project-menu span.logo img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; width: 100%; max-width: 60%; margin: auto}
.featured-project-menu img.background {position: absolute; top: 0; right: 0; opacity: 0.5}

.featured-project-menu a.active {width: 160px}
.featured-project-menu a.active span.logo,
.no-touch .featured-project-menu a:hover span.logo {opacity: 0}
.featured-project-menu a.active img.background,
.no-touch .featured-project-menu a:hover img.background {opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1)}

.featured-project-menu a,
.featured-project-menu img.background {-webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out}
.featured-project-menu span.logo {-webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out}
.featured-project-menu a:hover span.logo {-webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in}


@media (max-width: 1024px) {
    .featured-project-menu {position: relative}
    .featured-project-menu ul {top: 0; margin-top: 0; white-space: nowrap}
    .featured-project-menu li {float: none; display: inline-block; width: 33.33%; height: auto; clear: none; vertical-align: top}
    .featured-project-menu li+li {margin: 0}
    .featured-project-menu li a {width: auto; height: 0; padding-bottom: 62%}
    .featured-project-menu li a.active {width: auto; height: 0}
    .featured-project-menu li a.active:after {content: ''; position: absolute; left: 50%; bottom: 0; margin-left: -10px; border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent}
    .featured-project-menu li a img.background {width: 100%; height: auto}
}

@media (orientation: portrait) and (min-height: 768px) {
    .featured-project-menu {position: relative; top: 0; left: 0; right: 0; bottom: auto}
    .featured-project-menu ul {top: 0; margin-top: 0}
}

.mobile .featured-project-menu a img.background {opacity: 0.5 !important; -webkit-transform: none !important; transform: none !important; -webkit-transition: none; transition: none}
.mobile .featured-project-menu a.active img.background {opacity: 1 !important}

/*
 * Featured projects
 */
.featured-projects {position: relative; z-index: 1; height: 45%}
.featured-projects ul {position: absolute; top: 0; left: 0; z-index: 1; display: none; overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none}
.featured-projects ul.active {display: block; z-index: 2}
.featured-projects ul>li {overflow: hidden; display: inline-block; width: 25%; height: 100%; background: #000; vertical-align: top; opacity: 1; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.featured-projects ul>li.hidden {opacity: 0; -webkit-transform: scale3d(0.9, 0.9, 1); transform: scale3d(0.9, 0.9, 1)}
.featured-projects a {position: relative; display: block; width: 100%; height: 100%}
.featured-projects a:after {content: ''; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 50%}
.featured-projects a:after {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0,0,0,0) 100%);
}
.featured-projects img.background {position: relative; z-index: 1; display: block; width: 100%}
.no-touch .featured-projects img.background {opacity: .5; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.featured-projects img.logo {position: absolute; z-index: 3; height: auto; width: 30%; margin: 25px 0 0 40px}

.no-touch .featured-projects a:hover img.background {opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1)}

.mobile .featured-projects {overflow: scroll; -webkit-overflow-scrolling: touch}
.mobile .featured-projects ul>li.hidden {opacity: 1; -webkit-transform: none !important; transform: none !important; -webkit-transition: none; transition: none}
.mobile .featured-projects img.background {opacity: 1; -webkit-transform: none !important; transform: none !important; -webkit-transition: none; transition: none}

@media (orientation: landscape) and (max-width: 767px) {
    .featured-projects ul {width: 150%}
}

@media (orientation: portrait) {
    .featured-projects ul {width: 240%}
}

@media (max-height: 379px) {
    .featured-projects {height: 100%}
}

/*
 * Featured project
 */
.featured-project {position: relative; height: 100%; padding: 0 20%}
.featured-project p.background {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0}
.featured-project p.background img {display: block; max-width: 100%; height: auto}
.featured-project div.description {position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: 470px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)}
.featured-project div.content {overflow: auto; padding: 50px}
.featured-project div.media {position: absolute; top: 0; bottom: 0; left: 20%; right: 20%; width: auto; margin: auto}

.featured-project.playing div.description {right: -480px}

.featured-project {-webkit-transition: padding 0.25s ease-out; transition: padding 0.25s ease-out}
.featured-project div.description {-webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out}
.featured-project .featured-project-menu {-webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out}
.featured-project div.media {-webkit-transition: left 1.25s ease-out; transition: left 1.25s ease-out; -webkit-transition: top 0.25s ease-out; transition: top 0.25s ease-out}

.featured-project .vjs-mute-control {display: none}
.featured-project .vjs-volume-control {display: none}

.featured-project .player-overlay {overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; -webkit-overflow-scrolling: touch}
.featured-project.playing .player-overlay {display: none}

@media (max-width: 1024px) {
    .featured-project {position: static; height: auto; padding: 0}
    .featured-project p.background {display: none}
    .featured-project div.media {position: static}
    .featured-project div.description {position: static; width: auto}
    .featured-project div.description .scrollable {position: static}
}

/*
 * Portfolio project
 */
.portfolio-project {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #ddd}
.portfolio-project .background {position: absolute; top: 0; left: 0; right: 0; z-index: 1}
.portfolio-project .description {position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; overflow: auto; width: 470px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)}
.portfolio-project .description .content {padding: 50px}

.portfolio-project .close {position: absolute; top: 0; right: 470px; z-index: 3; width: 50px; height: 50px; background-color: #fff}
.portfolio-project .portfolio-next {position: absolute; top: 60px; right: 470px; z-index: 3; width: 50px; height: 50px; background-color: #d97d34; color: #fff; font-size: 40px; text-indent: 100%; white-space: nowrap}
.portfolio-project .portfolio-previous {position: absolute; top: 120px; right: 470px; z-index: 3; width: 50px; height: 50px; background-color: #d97d34; color: #fff; font-size: 40px; text-indent: 100%; white-space: nowrap}
.portfolio-project .portfolio-next:before,
.portfolio-project .portfolio-previous:before {position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; line-height: 50px; text-align: center; text-indent: 0}
.portfolio-project .portfolio-next:active,
.portfolio-project .portfolio-next:hover,
.portfolio-project .portfolio-previous:active,
.portfolio-project .portfolio-previous:hover {background-color: #df8944; text-decoration: none}

.portfolio-project .gallery .scrollbar {right: auto; left: 10px}
.portfolio-project .gallery {position: absolute; top: 0; left: 0; right: 470px; bottom: 0; z-index: 2}
.portfolio-project .gallery>div {position: relative; z-index: 2}
.portfolio-project .gallery figure {padding: 50px; text-align: center}
.portfolio-project .gallery img {max-width: 100%; height: auto}

@media (max-width: 767px) {
    .portfolio-project .description .content {padding: 50px 20px}
    .portfolio-project ul.technologies {margin-left: -5px; margin-right: -5px}
    .portfolio-project ul.technologies>li {margin-left: 5px; margin-right: 5px}
}

@media (orientation: landscape) and (max-width: 1023px) {
    .portfolio-project .portfolio-next {right: 40%}
    .portfolio-project .portfolio-previous {right: 40%}
    .portfolio-project .close {right: 40%}
    .portfolio-project .gallery {width: 60%}
    .portfolio-project .description {width: 40%}
}

@media (orientation: landscape) and (max-width: 567px) {
    .portfolio-project .portfolio-next {right: 50%}
    .portfolio-project .portfolio-previous {right: 50%}
    .portfolio-project .close {right: 50%}
    .portfolio-project .gallery {width: 50%}
    .portfolio-project .description {width: 50%}
    .portfolio-project .gallery figure {padding: 20px; text-align: center}
}

@media (orientation: portrait) {
    .portfolio-project .portfolio-next {right: 60px; bottom: 50%; top: auto}
    .portfolio-project .portfolio-previous {right: 120px; bottom: 50%; top: auto}
    .portfolio-project .close {right: 0; bottom: 50%; top: auto}
    .portfolio-project {padding-right: 0}
    .portfolio-project .gallery {position: absolute; top: 0; right: 0; bottom: 50%; left: 0; height: auto}
    .portfolio-project .description {top: 50%; left: 0; width: 100%}
    .portfolio-project .gallery figure {padding: 20px; text-align: center}
}

@media (max-width: 1024px) and (max-height: 1024px) {
    .portfolio-project {overflow: auto; -webkit-overflow-scrolling: touch}
    .portfolio-project .close {position: fixed; top: 0; right: 0}
    .portfolio-project .portfolio-next {position: fixed; top: 60px; right: 0}
    .portfolio-project .portfolio-previous {position: fixed; top: 120px; right: 0}
    .portfolio-project {padding-right: 0}
    .portfolio-project .gallery {position: static; width: 100%; height: auto}
    .portfolio-project .gallery .scrollbar-wrapper {height: auto}
    .portfolio-project .gallery .scrollbar-wrapper .scrollable {position: static; overflow: auto}
    .portfolio-project .gallery .content>div {display: none}
    .portfolio-project .description {position: static; width: 100%}
    .portfolio-project .description .content {padding: 30px 20px}
    .portfolio-project .description .content>div[style] {display: none}
    .portfolio-project .description .scrollbar-wrapper .scrollable {position: static; overflow: auto}
    .portfolio-project .gallery figure {margin: 0; padding: 0 0 40px; text-align: center}
    .js .portfolio-project .step-content {opacity: 1}
}

/*
 * Landing
 */

.landing {color: #262626; font-size: 18px}
.landing .main {height: auto}
.landing .menu-toggle {display: none}
.landing > header {height: 190px; padding: 0 !important; margin-bottom: 50px; background: #fff}
.landing > header > div {position: relative; max-width: 1288px; margin: 0 auto}
.landing > header p.logo {float: none; padding: 24px 0 9px 0}
.landing > header p.logo a {margin: 0 auto}
.landing > header p.slogan {margin-top: 10px; padding: 0 10px; color: #ccc; font-size: 22px; font-weight: 700}
.landing .clutch {position: absolute; top: 40px; right: 65px; display: inline-block; width: 175px;}
.landing .clutch img {display: block; width: 100%; height: auto}
.landing header {min-height: 103px; text-align: center}
.landing article > div {position: relative; display: block;}
.landing article > div > * {display: block}
.landing aside {position: absolute; top: 0; right: 0; width: 305px}
.landing aside h2 {margin: 10px 0}
.landing .top {position: relative; min-height: 528px; margin-bottom: 40px; padding-right: 350px}
.landing h1 {margin: 0; font-size: 30px; font-weight: 300}
.landing h1 + p {margin: 5px 0 0; font-size: 18px}
.landing h2 {font-size: 30px; text-align: center}
.landing h2.slash {display: block; font-size: 28px; transform: translate3d(0,0,0)}
.landing h3 {font-weight: 400}
.landing .portfolio-list > li img {width: auto}
.landing .portfolio-list .block {height: 241px;}
.landing .portfolio-list .block p.background {position: relative; height: 250px; background: #fff;}
.landing .portfolio-list .block p.background img {position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) scale(1); transform: translate3d(-50%, -50%, 0) scale(1);}
.landing .portfolio-list .slick-slide {border-left: 1px solid #fff}
.landing .portfolio-list .slick-slide li img {width: 100%}
.landing.no-touch .block:hover p.background {background: #fff}
.landing.no-touch .block:hover p.background img {-webkit-transform: translate3d(-50%, -50%, 0) scale(1.05); transform: translate3d(-50%, -50%, 0) scale(1.05);}
.landing .title {transform: translate3d(0,0,0)}
.landing .button {transform: translate3d(0,0,0)}
.landing .lead {font-size: 18px; text-align: center; margin: -20px auto 40px}
.landing .technology-icon {margin: 30px auto; text-align: center}
.landing .technology-icon img {width: auto}
.landing .hexagon-list.big {position: relative; width: 100%; font-size: 0; margin: 0; margin-top: 40px;}
.landing .columns > aside ul.blog-entries .block .header.big .meta .date,
.landing .columns > aside ul.blog-entries .block .header.big .meta .category {font-size: 13px; transform: translate3d(0,0,0)}
.landing .hexagon-list.big>li {width: 20%; margin: 30px; margin-right: 30px; transform: translate3d(0,0,0)}
.landing .hexagon-list.big>li>div {line-height: 310px}
.landing .dot-navigation {text-align: center}
.landing .block p.background {padding-bottom: 62%}
.landing .portfolio-list-wrap {margin-top: 40px;}
.landing .portfolio-list {transform: translate3d(0, 0, 0);}
.landing ul.portfolio-list>li {transform: translate3d(0,0,0)}
.landing .know-box {background: #d97d34; color: #fff; padding: 20px 40px; text-align: center}
.landing .blog-entries-wrap {position: absolute; bottom: 0; width: calc(100% - 45px);}
.landing .blog-entries .block p.background {overflow: hidden; transform: translate3d(0, 0, 0);}
.landing .blog-entries .block p.background img {position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1); transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)}
.landing .know-box .button {display: block; max-width: 180px; margin: 20px auto 0; background: #fff; border: none}
.landing .references ul {touch-action: pan-y !important; -ms-touch-action: pan-y !important}
.landing blockquote small {transform: translate3d(0,0,0)}
.landing figure img {width: 100%}
.landing > footer {min-height: 57px; background: #f7f7f7; border: none; color: #a4a4a4; line-height: 57px}
.landing > footer a {color: #101010; font-size: 18px}
.landing > footer p {padding: 2px 8px}
.landing > footer nav {float: left}
.landing > footer .lang {padding-bottom: 16px; float: right}
.landing > footer .lang a {position: relative; display: block; width: 36px; height: 36px; margin: 0 auto; font-size: 14px; color: #ababab; text-align: center; transition: color 0.2s ease}
.landing > footer .lang a:before {position: absolute; top: 0; left: 0; font-size: 36px}
.landing > footer .lang a:hover {color: #d97d34; text-decoration: none}
.landing > footer .lang a:before:hover {color: #d97d34}
.landing > footer .lang a span {display: block; height: 60px; line-height: 37px; text-align: center}
.landing > footer li {display: inline-block}
.landing > footer li + li {margin-left: 20px}
.landing .center {text-align: center}
.landing .button--wide {padding-left: 64px; padding-right: 64px;}

@media all and (max-width: 1320px) {
    .landing .clutch {width: 100px; top: 28px; right: 150px;}
    .landing .hexagon-list.big>li {width: 18%; padding-top: 190px; text-align: center !important}
    .landing .hexagon-list.big>li:before {font-size: 190px; top: 0; margin-top: 0}
    .landing .hexagon-list.big>li>div {line-height: 200px; height: 190px; font-size: 100px; top: 0; margin-top: 0}
}
@media all and (max-width: 1023px) {
    .landing .clutch {right: 50px;}
    .landing .top {min-height: 0; padding-right: 0}
    .landing ul.portfolio-list>li {width: 50%}
    .landing ul.portfolio-list .block {height: auto;}
    .landing ul.portfolio-list .block .title {font-size: 24px;}
    .landing .hexagon-list.big>li {width: 40%; padding: 190px 0 0 0 !important; font-size: 16px}
    .landing aside {position: relative}
    .landing .blog-entries-wrap {position: relative; width: 100%; margin-top: 40px;}
    .landing footer > * {float: none !important; margin: auto; text-align: center}
    .landing footer ul {padding: 0}
}
@media (min-width: 1024px) {
    .columns>aside ul.blog-entries li {width: 100%}
    .columns>aside ul.blog-entries .block p.background {padding-bottom: 79%}
    .columns>aside ul.blog-entries li .block .title {font-size: 16px}
    .columns>aside ul.blog-entries li .block .header.big .meta .date,
    .columns>aside ul.blog-entries li .block .header.big .meta .category {padding: 0 10px; font-size: 14px; line-height: 30px}
}
@media all and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait){
    .landing .hexagon-list.big>li:before,
    .landing .hexagon-list.big>li>div {width: 100%}
}

@media all and (max-width: 767px) {
    .landing header {height: auto;}
    .landing .clutch {position: static; width: 100px; margin: 16px auto;}
    .landing .block {height: auto}
    .landing .hexagon-list.big>li,
    .landing .hexagon-list.big>li:before {left: -30px !important; right: -30px !important}
    .landing ul.portfolio-list>li,
    .landing .hexagon-list.big>li,
    .landing .hexagon-list.big>li > div {width: 100%}
    .landing .references figure {float: none; margin: 0 0 16px 0; text-align: center;}
    .landing .references canvas {width: 109px !important}
    .landing .references blockquote {font-size: 12px;}
    .landing .button--wide {padding-left: 24px; padding-right: 24px;}
}
/*
 * Sub-menu
 */
nav.sub-menu {clear: both; position: relative; z-index: 30000; height: 87px; margin: 0; padding: 0 240px; border-bottom: 1px solid #d7d7d7; background: #fff; font-size: 21px; font-weight: 200; line-height: 87px; text-align: center; text-transform: lowercase}
nav.sub-menu>div {overflow: visible; position: relative}
nav.sub-menu ul {margin: 0; list-style: none; white-space: nowrap}
nav.sub-menu ul li {position: relative; display: inline-block; vertical-align: top}
nav.sub-menu ul>li+li:before {position: absolute; top: 0; left: -24px; color: #dadada; font-size: 42px; line-height: 87px; cursor: default}
nav.sub-menu ul li a {display: inline-block; padding: 0 33px; color: #000; vertical-align: top; -webkit-transition: color 0.25s ease; transition: color 0.25s ease}
nav.sub-menu ul li a {text-decoration: none; outline: none}
nav.sub-menu ul li a.active,
.touch nav.sub-menu ul li a:active,
.no-touch nav.sub-menu ul li a:hover {color: #d97d34}

nav.sub-menu ul.toggled {display: none}
nav.sub-menu ul.toggled.active {display: block}
nav.sub-menu ul.toggled.absolute {position: absolute; top: 100%; left: 0; right: 0}

nav.sub-menu p.toggler {position: absolute; top: 0; right: 0; bottom: 0; margin: 0; padding: 0 20px}
nav.sub-menu p.toggler a {display: inline-block; width: 120px; padding: 10px; border: 1px solid #d7d7d7; color: #000; font-size: 14px; line-height: 1; vertical-align: middle}
nav.sub-menu p.toggler a:focus,
nav.sub-menu p.toggler a:hover {color: #d97d34; text-decoration: none}
nav.sub-menu p.toggler a.active {display: none}

nav.sub-menu p.back-to-top {position: absolute; top: 0; left: 0; bottom: 0; overflow: visible /* Android bugfix */; display: none; margin: 0; padding: 0 20px}
nav.sub-menu p.back-to-top a {position: relative; display: inline-block; width: 120px; padding: 10px; border: 1px solid #d7d7d7; color: #000; font-size: 14px; line-height: 1; vertical-align: middle}
nav.sub-menu p.back-to-top a:focus,
nav.sub-menu p.back-to-top a:hover {color: #d97d34; text-decoration: none}
nav.sub-menu p.back-to-top a:before {position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin: -15px 0 0 0; font-size: 16px; text-indent: 0; line-height: 30px}

nav.sub-menu.absolute {position: absolute; top: 0 !important; left: 0; right: 0; z-index: 10; width: 100%; max-width: 1920px; margin: auto}
nav.sub-menu.fixed {position: fixed; left: 0; right: 0; z-index: 30000; width: 100%; max-width: 1920px; margin: auto}

*+.sub-menu {margin-top: 0 !important}
.main>div.home nav.sub-menu {position: absolute; top: 0; left: 0; right: 0}
.tagline+.sub-menu {position: static !important}

nav.sub-menu select {border: none; background: transparent}

@media (max-height: 768px) {
    nav.sub-menu {height: 56px; font-size: 16px; line-height: 56px}
    nav.sub-menu ul>li+li:before {left: -18px; font-size: 32px; line-height: 56px}
}

@media (max-width: 1599px) {
    nav.sub-menu {height: 56px; padding: 0 120px; font-size: 14px; line-height: 56px}
    nav.sub-menu ul li a {padding-left: 20px; padding-right: 20px}
    nav.sub-menu ul>li+li:before {left: -15px; font-size: 28px; line-height: 56px}

    nav.sub-menu p.toggler a {width: 120px}
    nav.sub-menu p.back-to-top a {width: 120px}
}

@media (max-width: 1023px) {
    nav.sub-menu {margin: 0; padding: 0 0 0 46px}
    nav.sub-menu.toggled {padding-right: 46px}
    .home nav.sub-menu {padding: 0}

    nav.sub-menu p.toggler {padding: 0}
    nav.sub-menu p.toggler a {width: 45px; padding: 0; border-width: 0 0 0 1px; text-indent: -99em; line-height: 56px; vertical-align: top}
    nav.sub-menu p.toggler a:after {content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -12px 0 0 -5px; border-radius: 5px; background: #d97d34}
    nav.sub-menu p.toggler a:before {content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: 2px 0 0 -5px; border-radius: 5px; background: #d7d7d7}

    nav.sub-menu p.toggler a.categories:after {background: #d7d7d7}
    nav.sub-menu p.toggler a.categories:before {background: #d97d34}

    nav.sub-menu p.back-to-top {padding: 0}
    nav.sub-menu p.back-to-top a {width: 45px; padding: 0; border-width: 0 1px 0 0; text-indent: -99em; line-height: 56px; vertical-align: top}
    nav.sub-menu p.back-to-top a:before {left: 50%; margin-left: -15px}
}

@media (max-width: 1023px) {
    nav.sub-menu ul {overflow: scroll; padding: 0; text-overflow: clip; -webkit-overflow-scrolling: touch}
}

@media (max-height: 379px) {
    .tagline+.sub-menu {position: absolute !important}
}

nav.sub-menu.sub-menu--hr-pages {height: 56px; padding: 0 120px; font-size: 14px; line-height: 56px}
nav.sub-menu.sub-menu--hr-pages ul li a {padding-left: 20px; padding-right: 20px}
nav.sub-menu.sub-menu--hr-pages ul>li+li:before {left: -15px; font-size: 28px; line-height: 56px}

nav.sub-menu.sub-menu--hr-pages p.toggler a {width: 120px}
nav.sub-menu.sub-menu--hr-pages p.back-to-top a {width: 120px}

@media (max-width: 719px) {
    nav.sub-menu.sub-menu--hr-pages {padding: 0 20px;}
    nav.sub-menu.sub-menu--hr-pages p.back-to-top a {width: 70px}
}

nav.sub-menu select {
    display: inline-block;
    padding: 0 30px;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;    
}
nav.sub-menu > div {
    width: auto;
}
nav.sub-menu > div > label {
    position: relative;
    display: inline-block;
    width: auto;
}
nav.sub-menu > div > label:after {
    font-family: 'iconvault';
    content: "\e913";
    pointer-events: none;
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(0, -50%);
    margin-top: 3px;
    font-size: 20px;
    line-height: 17px;
}
/*
 * Ideas
 */
.mobile section.ideas {padding: 0 !important}
.mobile section.ideas>article {overflow: visible; padding: 0}

div.ideas {max-width: none; text-align: left}
div.ideas .grid {overflow: visible}
div.ideas>ul {position: relative; top: 0; left: 0; z-index: 2; width: 100%; padding: 0; list-style: none}
div.ideas>ul>li {overflow: hidden; position: relative; display: inline-block; width: 100%; padding: 130px 200px 130px 50%; background: rgba(0, 0, 0, 0); white-space: normal; vertical-align: top}
div.ideas>ul>li>div {position: relative; z-index: 2; max-width: 600px}
div.ideas>ul>li>p.background {position: absolute; top: 50%; left: 50%; z-index: 1; margin: -492px 0 0 -960px}
div.ideas>ul>li.alt p {color: #fff}
div.ideas>ul>li figure {max-width: 100%; max-height: 100px}
div.ideas>ul>li figure img {max-width: 100%; max-height: 100px; width: auto; height: auto}
div.ideas>ul>li figure.medium {margin-top: -100px}
div.ideas>ul>li figure.medium,
div.ideas>ul>li figure.medium img {max-height: 200px}
div.ideas>ul>li figure.big {margin-top: -100px}
div.ideas>ul>li figure.big,
div.ideas>ul>li figure.big img {max-height: 300px}
div.ideas>ul>li .images img {width: auto; max-height: 60px}

div.ideas-backgrounds {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1}
div.ideas-backgrounds>p.background {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; margin: 0}
div.ideas-backgrounds>p.background img {width: 100%; height: auto}

.mobile div.ideas>ul>li>p.background {position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; width: 100%; margin: 0}
.mobile div.ideas>ul>li>p.background img {width: 100%; height: auto}

div.ideas .dot-navigation {position: absolute; bottom: 100px; left: 0; right: 0; z-index: 3; margin: 0; text-align: center}

.js div.ideas>ul {white-space: nowrap}
.mobile div.ideas>ul {white-space: normal}

@media (max-width: 767px) {
    div.ideas {margin: -70px -20px -120px}
    .mobile div.ideas {margin: 0}
    .mobile div.ideas>ul>li>p.background {left: auto; right: 0; width: 200%}
}

@media (max-width: 1023px) {
    .kopanito-figure {margin: 0;}
}

@media (max-width: 479px) {
    div.ideas {margin: -20px -20px -70px}
}

@media (orientation: landscape) and (max-height: 960px) {
    div.ideas>ul>li {padding-top: 100px}
}

@media (orientation: landscape) and (max-width: 1279px) {
    div.ideas>ul>li {padding: 100px 30px 100px 400px}
}

@media (orientation: landscape) and (max-width: 1023px) {
    div.ideas>ul>li {padding: 30px 30px 100px 200px}
    div.ideas .dot-navigation {bottom: 30px}
}

@media (orientation: landscape) and (max-width: 767px) {
    div.ideas>ul>li {padding: 30px 30px 100px 30px}
    div.ideas .dot-navigation {bottom: 30px}
}

@media (orientation: portrait) and (max-width: 1023px) {
    div.ideas>ul>li {padding: 30% 10% 30% 30%}
}

@media (orientation: portrait) and (max-width: 767px) {
    div.ideas>ul>li {padding: 20% 10% 20% 30%}
}

@media (orientation: portrait) and (max-width: 567px) {
    div.ideas>ul>li {padding: 30px 30px 100px 30px}
    div.ideas .dot-navigation {bottom: 30px}
}

/*
 * Team
 */
.team {overflow: visible; max-width: none; margin: 0 -50px; cursor: default}
.team .background {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; text-overflow: clip}


.team>div {position: relative; z-index: 2; width: 890px; height: 620px; max-width: 100%; max-height: 100%; margin: auto}
.team>div p {position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; margin: 0}
.team>div p .button {vertical-align: top}

.team-items {overflow: visible; position: absolute; top: 0; right: 0; bottom: 80px; left: 0; margin: 0}

.team-items--static {
    position: relative;
    margin: 32px auto;
    display: block;
    width: 1250px;
    text-align: left;
}

.team-items>li {overflow: visible; position: absolute; height: 196px; width: 170px; margin-left: -85px}
.team-items>li:before {position: absolute; top: 0; right: -20px; bottom: 0; left: -20px; color: transparent; font-size: 196px; text-align: center; text-shadow: 0 5px 20px rgba(0, 0, 0, 1)}
.team-items>li.team-item-1 {top: 0; left: 33%}
.team-items>li.team-item-2 {top: 0; left: 67%}

.team-items>li.team-item-3 {top: 12%; left: 10%}
.team-items>li.team-item-4 {top: 12%; left: 90%}

.team-items>li.team-item-5 {top: 41%; left: 27%}
.team-items>li.team-item-6 {top: 41%; left: 73%}

.team-items>li.team-item-7 {top: 64%; left: 50%}
.team-items>li.team-item--static {position: relative; display: inline-block; top: auto; left: auto; margin-left: 0; margin-right: 16px; margin-bottom: 16px;}
.team-items>li.team-item--static:before,
.team-items>li.team-item--static>* {right: auto; left: 50%; transform: translateX(-50%);}
.team-items>li.team-item--static:before {font-size: 196px; text-shadow: 0 0px 1px rgba(0, 0, 0, 0.15)}


.team-items>li.team-item--static:nth-child(7),
.team-items>li.team-item--static:nth-child(8),
.team-items>li.team-item--static:nth-child(9),
.team-items>li.team-item--static:nth-child(10),
.team-items>li.team-item--static:nth-child(11) {
    transform: translate(55%, -25%);
}

@media (max-width: 719px) {
    
}

/* .team-items>li.team-item--static:nth-child(7),
.team-items>li.team-item--static:nth-child(8),
.team-items>li.team-item--static:nth-child(9) {
    transform: translate(0, -50%);
} */

.team-items>li>* {position: absolute !important; top: 0; left: 0; right: 0; z-index: 2}
.team-items>li>*+* {z-index: 1}

.team-items>li.hidden {display: none}

.team-counter {overflow: visible; position: absolute; top: -30%; left: 0; right: 0; z-index: 3; width: 340px; height: 340px; margin: auto !important; text-align: center}
.team-counter:before {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; color: #d97d34; font-size: 340px; text-shadow: 0 0 20px rgba(0, 0, 0, 1); line-height: 1}
.team-counter>span {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; padding-top: 66%; color: #fff; font-size: 24px}
.team-counter>span span {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; color: #d97d34; font-size: 45px; font-weight: 700; line-height: 255px}
.team-counter>span:before {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; color: #fff; font-size: 164px; text-align: center; line-height: 290px}

/* IE9 and IE10 hack */
@media screen and (min-width:0\0) {
    .team-counter:before {top: 0.05em}
    .team-counter>span:before {top: 0.05em}
}

@media (max-width: 767px) {
    .team {margin: -20px}
}

@media (orientation: landscape) and (max-width: 767px) {
    .team>div {height: 320px}
    .team>div p {bottom: 0}
    .team-counter {bottom: 20px}

    .team-items>li.team-item-1 {top: 10%; left: 25%}
    .team-items>li.team-item-2 {top: 10%; left: 75%}
    .team-items>li.team-item-3 {display: none}
    .team-items>li.team-item-4 {display: none}
    .team-items>li.team-item-5 {display: none}
    .team-items>li.team-item-6 {display: none}
    .team-items>li.team-item-7 {display: none}

    .team-counter {top: 0; width: 180px; height: 180px}
    .team-counter:before {font-size: 180px}
    .team-counter>span {font-size: 14px}
    .team-counter>span span {font-size: 24px; line-height: 140px}
    .team-counter>span:before {font-size: 100px; line-height: 155px}
}

@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) {
    .team>div {height: 520px}
    .team>div p {bottom: 20px}

    .team-items>li.team-item-1 {top: 30px; left: 0}
    .team-items>li.team-item-2 {top: 30px; left: auto; right: 0; margin: 0 -85px 0 0}
    .team-items>li.team-item-3 {top: 30px; left: 180px}
    .team-items>li.team-item-4 {top: 30px; left: auto; right: 180px; margin: 0 -85px 0 0}
    .team-items>li.team-item-5 {top: 187px; left: 90px}
    .team-items>li.team-item-6 {top: 187px; left: auto; right: 90px; margin: 0 -85px 0 0}
    .team-items>li.team-item-7 {display: none}

    .team-counter {top: 0}
}

@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) {
    .team>div p {bottom: 40px}

    .team-items>li.team-item-7 {display: none}
}

@media (orientation: portrait) and (max-width: 479px) {
    .team>div {height: 320px}
    .team>div p {bottom: 20px}

    .team-counter {top: 0; width: 180px; height: 180px}
    .team-counter:before {font-size: 180px}
    .team-counter>span {font-size: 14px}
    .team-counter>span span {font-size: 24px; line-height: 140px}
    .team-counter>span:before {font-size: 100px; line-height: 155px}

    .team-items>li.team-item-1 {top: 10%; left: 10%}
    .team-items>li.team-item-2 {top: 10%; left: 90%}
    .team-items>li.team-item-3 {display: none}
    .team-items>li.team-item-4 {display: none}
    .team-items>li.team-item-5 {display: none}
    .team-items>li.team-item-6 {display: none}
    .team-items>li.team-item-7 {display: none}
}

@media (orientation: portrait) and (min-width: 480px) and (max-width: 567px) {
    .team>div p {bottom: 20px}
    .team-items>li.team-item-1 {top: 52%; left: 20%}
    .team-items>li.team-item-2 {top: 52%; left: 80%}
    .team-items>li.team-item-5 {display: none}
    .team-items>li.team-item-6 {display: none}
    .team-items>li.team-item-7 {display: none}
}

@media (orientation: portrait) and (min-width: 568px) and (max-width: 767px) {
    .team-items>li.team-item-3 {left: 0}
    .team-items>li.team-item-4 {left: 100%}
    .team-items>li.team-item-5 {left: 20%}
    .team-items>li.team-item-6 {left: 80%}
}


.not-visible {display: none}

.js img[data-role="hexagon"] {visibility: hidden}
.js video {visibility: hidden}
.js.mobile video,
.js video.vjs-tech {visibility: visible}

.unselectable {cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

p.loading {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; width: 180px; height: 200px; margin: auto; background: transparent  url('http://static.merixstudio.com/images/preloader.png?ee25c5144e62') no-repeat 50% 50%; background-size: contain}
/*.mobile p.loading,
.mobile p.loading.hidden {display: none}*/

.debug {position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: #000; color: #fff}


.sticky {position: relative}


/*
 * Content
 */
.main {overflow: visible !important; position: relative; height: 100%}
.main--flexible {height: auto;}
.main>div>header {padding: 70px 50px; text-align: center}
.main>div>header h2 {margin-bottom: 0}
.main>div {overflow: visible !important; position: relative; z-index: 2; height: 100%; max-width: 1920px; margin: auto}
.main>div.home {padding-top: 87px}
.main>div.hidden {position: absolute; top: 0; left: 0; z-index: 1; width: 100%}
.main>div.transparent {z-index: 3; background: transparent}
.main>div.fixed {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; min-height: 0 !important}

@media (max-height: 768px), (max-width: 1599px) {
    .main>div.home {padding-top: 56px}
}


/*
 * Slash headers
 */
.slash {overflow: visible; position: relative; display: inline-block; font-size: 48px; font-weight: 100; line-height: 54px; text-transform: lowercase; vertical-align: middle}
.slash:before {color: #dadada; font-family: 'iconvault'; font-size: 54px; line-height: 54px; vertical-align: middle; cursor: default}
.slash.white {color: #fff}
.slash.medium {font-size: 30px}
a.slash {color: #000}
h2.slash {margin-bottom: 1.5em}


/*
 * Buttons
 */
.button {position: relative; display: inline-block; padding: 0 27px 2px; border: 2px solid #000; border-radius: 2px; background: transparent; color: #000; font-size: 19px; white-space: nowrap; line-height: 48px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.button:active,
.button:hover,
.button:focus {border-color: #d97d34; color: #d97d34; text-decoration: none; outline: none}
.button.white {border-color: #fff; color: #fff}
.button.white:active,
.button.white:hover,
.button.white:focus {border-color: #000; color: #000}
.button.orange-hover:active,
.button.orange-hover:hover,
.button.orange-hover:focus {border-color: #d97d34; color: #d97d34}
.button.wide {width: 100%; text-align: center}

.button.button--orange {
    border-color: #d97d34;
    color: #d97d34;
}

.button.button--orange:hover,
.button.button--orange:focus {
    border-color: #000;
    color: #000;
}

@media (max-width: 567px) {
    .button {padding: 0 20px 2px; font-size: 14px; line-height: 35px}
}

.close {position: relative; display: inline-block; width: 43px; height: 43px; background: transparent; color: #ccc; text-indent: 100%; white-space: nowrap}
.close:active,
.close:hover {color: #d97d34; text-decoration: none}
.close:before {position: absolute; top: 50%; left: 50%; width: 23px; height: 23px; margin: -12px 0 0 -12px; font-size: 23px; text-indent: 0; line-height: 23px}

@media (max-width: 767px) {
    .close {width: 23px; height: 23px}
}


/*
 * Scrollable areas
 */
.scrollable {overflow: scroll; height: 100%; -webkit-overflow-scrolling: touch}
.scrollable>.content {background: rgba(0, 0, 0, 0)}  /* IE10 scroll fix */
.scrollbar-wrapper textarea::-webkit-scrollbar,
.scrollable::-webkit-scrollbar {width: 0}
.scrollable.overflow-hidden {overflow: hidden}
.scrollbar-wrapper {position: relative; height: 100%}
.scrollbar-wrapper .scrollable {position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto}
.scrollbar-wrapper.textarea {padding: 7px 30px 7px 10px}
.scrollbar-wrapper .textarea-wrapper textarea {overflow: scroll}

.scrollbar {position: absolute; top: 50px; right: 10px; bottom: 50px; width: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.1)}
.scrollbar .handle {position: absolute; top: 0; left: 0; height: 100px; width: 100%; border-radius: 5px; background: rgba(0, 0, 0, 0.25)}
.scrollbar.hidden {display: none}

.scrollbar-wrapper.textarea .scrollbar {top: 20px; bottom: 20px}


/*
 * Horizontal rule
 */
.hr {height: 1px; margin: 30px 0; background: #dadada}
.hr hr {display: none}

article .hr {width: 1920px; position: relative; left: 50%; margin-left: -960px}

@media (max-width: 1279px) {
    article .hr {width: auto; left: 0; margin-left: -50px; margin-right: -50px}
}

@media (max-width: 767px) {
    article .hr {margin-left: -20px; margin-right: -20px}
}


/*
 * Feature list
 */
ul.features {overflow: visible; color: #646464}
ul.features>li {position: relative; padding: 6px 0 7px 50px}
ul.features>li+li {margin-top: 10px}
ul.features>li:before {position: absolute; top: 0; left: 0; width: 36px; height: 36px; color: #d97d34; font-size: 36px; line-height: 36px; text-align: left}


/*
 * Technologies
 */
*+ul.technologies {margin-top: 50px}
.slash+ul.technologies {margin-top: 0}

ul.technologies {margin-left: -10px; margin-right: -10px; cursor: default}
ul.technologies>li {position: relative; overflow: hidden; display: inline-block; width: 48px; height: 48px; margin-left: 10px; margin-right: 10px; vertical-align: top}
ul.technologies>li>span,
ul.technologies>li>a>span {overflow: hidden; display: block; text-indent: 100%; white-space: nowrap}
ul.technologies>li>a {color: #fff; text-decoration: none}
ul.technologies>li>a:hover {color: #d97d34}
ul.technologies>li>a:hover>span:before {color: #fff}
ul.technologies>li>span:before,
ul.technologies>li>a>span:before {position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 42px; text-indent: 0; text-align: center; line-height: 42px}

ul.technologies.big {max-width: 1200px; margin: 0 auto; font-size: 20px}
ul.technologies.big>li {width: 7em; height: auto; margin-left: 1em; margin-right: 1em; margin-bottom: 2.5em; padding-top: 6.5em; text-indent: 0}
ul.technologies.big>li:before {position: absolute; top: 0; left: 0; width: 100%; margin: 0; color: #d97d34; font-size: 100px; text-align: center; line-height: 1}
ul.technologies.big>li>span,
ul.technologies.big>li>a>span {text-indent: 0; white-space: normal}
ul.technologies.big>li>span:before,
ul.technologies.big>li>a>span:before {top: 0; left: 0; width: 100%; margin: 0; font-size: 60px; line-height: 100px}

@media (orientation: landscape) and (min-width: 568px) and (max-width: 1023px) {
    ul.technologies.big {font-size: 16px}
    ul.technologies.big>li:before {font-size: 80px}
    ul.technologies.big>li>span:before {font-size: 45px; line-height: 80px}
}

@media (orientation: landscape) and (max-width: 567px) {
    ul.technologies.big {font-size: 12px}
    ul.technologies.big>li:before {font-size: 60px}
    ul.technologies.big>li>span:before {font-size: 35px; line-height: 60px}
}

@media (orientation: portrait) and (min-width: 480px) and (max-width: 767px) {
    ul.technologies.big {font-size: 16px}
    ul.technologies.big>li:before {font-size: 80px}
    ul.technologies.big>li>span:before {font-size: 45px; line-height: 80px}
}

@media (orientation: portrait) and (max-width: 479px) {
    ul.technologies.big {font-size: 12px}
    ul.technologies.big>li {margin-left: 0.5em; margin-right: 0.5em}
    ul.technologies.big>li:before {font-size: 60px}
    ul.technologies.big>li>span:before,
    ul.technologies.big>li>a>span:before {font-size: 35px; line-height: 60px}
}


/*
 * Media device
 */
div.media {position: relative; overflow: visible; width: 500px}
div.media>div {position: relative; overflow: hidden; border-radius: 20px; padding: 4%; background: #000}
div.media>div>div {position: relative; overflow: hidden; padding-bottom: 56.25%; /* ratio: 16/9 */ background: #fff}
div.media>div>div>* {position: absolute; width: 100% !important; height: 100% !important}

div.media>div {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(0,0,0,1)));
    background-image: -webkit-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(0,0,0,1) 100%);
    background-image: linear-gradient(to bottom, rgba(102,102,102,1) 0%,rgba(0,0,0,1) 100%);
}

div.media>div:before {content: ''; position: absolute; left: 0; top: 0; width: 80%; height: 140%; background: #000}
div.media>div:before {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);

    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
}

@media (max-width: 1024px) {
    div.media>div {padding: 0; border-radius: 0}
}


/*
 * Featured links with a hexagon image
 */
.featured-links {display: table; width: 100%; text-align: left}
.featured-links>li {display: table-cell}
.featured-links canvas,
.featured-links img {margin-right: 15px; vertical-align: middle}
.featured-links a {color: #000}
.featured-links a:active,
.no-touch .featured-links a:hover {color: #d97d34; text-decoration: none}

@media (max-width: 1023px) {
    .featured-links {display: block}
    .featured-links>li {display: block}
    .featured-links>li+li {margin-top: 30px}
}

@media (max-width: 479px) {
    .featured-links {text-align: center}
    .featured-links canvas,
    .featured-links img {display: block; margin: auto}
    .featured-links .slash {margin-left: -1em}
}


/*
 * Columns
 */
.columns {display: table; overflow: visible; width: 100%; border-spacing: 0}
.columns>* {display: table-cell; vertical-align: top}
.columns>figure {width: 0; padding-right: 30px}
.columns.fixed {table-layout: fixed}
.columns.middle>* {vertical-align: middle}

.column-wrapper {margin-right: -30px; margin-left: -30px}
.column-wrapper>.columns {border-spacing: 30px}

.column-wrapper.spacing-100 {margin-right: -100px; margin-left: -100px}
.column-wrapper.spacing-100>.columns {border-spacing: 100px}

@media (max-width: 1024px) {
    .column-wrapper.spacing-100>.columns {display: table}
    .column-wrapper.spacing-100>.columns>* {display: table-cell}
}

@media (max-width: 1023px) {
    .column-wrapper.spacing-100 {margin: 0}
    .column-wrapper.spacing-100>.columns {display: block}
    .column-wrapper.spacing-100>.columns>* {display: block}
    .column-wrapper.spacing-100>.columns>*+* {margin-top: 50px}
}

@media (max-width: 479px) {
    .columns.featured-links>*>.columns {display: block}
    .columns.featured-links>*>.columns>* {display: block}
}

article>header+.column-wrapper {margin-top: -50px}


/*
 * Article
 */
article {overflow: hidden; padding: 0 50px 50px; background: #fff}
article>div {max-width: 1288px; margin: 0 auto}
article>div>header {position: relative; margin-bottom: 50px}
article>div>header p.background {position: relative; left: 50%; margin-left: -960px}
article>div>header .header {position: absolute; bottom: 50px}
article>div>header .author {position: absolute; top: 50px; right: 0}

section>article {background: transparent}

article .columns>aside {width: 350px; padding-left: 45px}
article .columns>aside .block .background {padding-bottom: 79%}

@media (max-width: 1024px) {
    article .columns {display: block}
    article .columns>* {display: block}
    article .columns>aside {width: auto; padding: 45px 0 0}
}

@media (max-width: 767px) {
    article {padding: 0 20px 50px}
    article>div>header {padding-top: 50px}
    article>div>header .header {position: relative; bottom: auto}
    article>div>header .header.big .title {padding: 20px 0; font-size: 35px}
    article>div>header .header.big.icon:before {display: none}
    article>div>header .header.big.icon .title {margin-left: 0}
    article>div>header .author {display: none}
}


/*
 * Article images
 */
article figure.image {max-width: 100%}
article div.image figure.image img {max-width: 100%}
article div.image {text-align: center}

@media (max-width: 767px) {
    article figure.image {float: none !important; margin-right: auto !important; margin-left: auto !important}
    article figure.image+* {clear: both}
}


/*
 * Sections
 */
section>article {overflow: visible}
section.fullscreen {position: relative; min-height: 100%; padding: 70px 0; background: #fff; text-align: center}
section.fullscreen .slash {position: relative; z-index: 2}
section.fullscreen.orange {background: #d97d34; color: #fff}
section.fullscreen.black {background: #2d2d2d; color: #fff}
section.fullscreen.page-not-found {padding: 70px 20px}
section.fullscreen.page-not-found img {max-width: 100%; height: auto}

@media (max-width: 479px) {
    section.fullscreen {padding-top: 20px; padding-bottom: 20px}
    section.fullscreen .slash {font-size: 30px}
}


/*
 * Blockquote
 */
blockquote {position: relative; padding: 20px 70px; border: 1px solid #dadada; border-width: 1px 0; font-style: italic; text-align: left}
blockquote footer {overflow: hidden; margin-top: 30px; color: #111; font-size: 18px; font-style: normal}
blockquote footer small {display: inline-block; font-size: 14px}
blockquote:before {position: absolute; top: -10px; left: -12px; width: 100px; height: 100px; color: #d97d34; font-size: 100px; font-style: normal; line-height: 100px}

blockquote.hexagon-icon {padding: 20px 90px; border: none; font-size: 15px}
blockquote.hexagon-icon:before {top: 20px; left: 0; width: 64px; height: 73px; background: transparent url('http://static.merixstudio.com/images/hexagon_quote.png?ee25c5144e62') no-repeat 0 0}

@media (max-width: 767px) {
    blockquote {padding-right: 20px}
}


/*
 * Table
 */
*+table {margin-top: 50px}
table {width: 100%; border: 1px solid #e2e2e2; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)}
table thead th {padding: 20px; border: 1px solid #e2e2e2; color: #000; font-size: 18px; font-weight: 400; text-align: left}
table tbody td {padding: 10px 20px; border: 1px solid #e2e2e2; font-size: 14px}
table tbody tr:nth-child(even) td {background: #f8f8f8}

@media (max-width: 480px) {
    table thead th {padding: 10px}
    table tbody td {padding: 10px 10px}
}


/*
 * Table wrapper
 */
*+.table-wrapper {margin-top: 50px}
.table-wrapper {overflow: auto; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)}

@media (max-width: 767px) {
    article .table-wrapper {margin-left: -20px; margin-right: -20px}
}


/*
 * Yes / No
 */
.yes {display: inline-block; width: 16px; height: 16px; background: transparent url('http://static.merixstudio.com/images/icons/icon_16x16_yes.png?ee25c5144e62') no-repeat 0 0; text-indent: -99em}


/*
 * References
 */
*+.references {margin-top: 50px}
.references ul {position: relative; left: 0; margin-left: -80px; padding: 0; list-style: none; white-space: nowrap}
.references ul>li {display: inline-block; width: 50%; padding-left: 80px; vertical-align: top; white-space: normal}
.references ul>li figure {float: left; margin: 0 25px 15px 0}
.references ul>li blockquote {overflow: hidden; padding: 0; border: none; font-size: 15px; font-weight: 200}
.references ul>li blockquote:before {display: none}

@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) {
    .references ul {margin-left: -40px}
    .references ul>li {padding-left: 40px}
}

@media (orientation: landscape) and (max-width: 767px) {
    .references ul>li {width: 100%}
}

@media (orientation: portrait) and (max-width: 1023px) {
    .references ul>li {width: 100%}
}

@media (orientation: portrait) and (max-width: 567px) {
    .references ul>li blockquote {overflow: visible}
}


/*
 * Dot navigation
 */
.dot-navigation a {overflow: hidden; position: relative; display: inline-block; width: 30px; height: 30px; background: rgba(0, 0, 0, 0) /* IE10 fix - make whole link clickable */; text-indent: 200%; text-overflow: clip; vertical-align: top; white-space: nowrap}
.dot-navigation a.hidden {display: none}
.dot-navigation a:focus,
.dot-navigation a:hover {text-decoration: none; outline: none}
.dot-navigation a:after {content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #eee; background: rgba(0, 0, 0, 0.125); -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.dot-navigation a.active:after {background: #d97d34}

.dot-navigation.alt a:after {background: #ccc; background: rgba(255, 255, 255, 0.25)}
.dot-navigation.alt a.active:after {background: #d97d34}


/*
 * Header
 */
.header {overflow: visible; position: relative}
.header .title {display: inline-block; margin: 0; padding: 10px; background: #fff; background: rgba(255, 255, 255, 0.9); color: #000; font-size: 36px; font-weight: 200; line-height: 1; vertical-align: top}
.header .title a {color: #000}
.header .meta {position: absolute; bottom: 100%; font-weight: 100; white-space: nowrap}
.header .meta .date {float: left; margin: 0; padding: 0 10px; background: #000; color: #fff; font-size: 14px; line-height: 30px}
.header .meta .category {float: left; margin: 0; padding: 0 10px; background: #d97d34; color: #fff; font-size: 12px; line-height: 30px}

.header.icon:before {position: absolute; left: 0; bottom: 0; width: 100px; height: 100px; background: #d97d34; color: #fff; font-size: 80px; text-align: center; line-height: 100px}
.header.icon .title {margin-left: 100px}

.header.big .title {padding: 10px 20px; color: #000; font-size: 45px; font-weight: 100; line-height: 1}
.header.big .meta .date {padding: 0 20px; font-size: 18px; line-height: 46px}
.header.big .meta .category {padding: 0 20px; font-size: 18px; line-height: 46px}

.header .date {transition: opacity 0.25s ease}
.header .category {transition: opacity 0.25s ease}
.header .title {transition: color 0.25s ease, background-color 0.25s ease}

@media (max-width: 767px) {
    .header.icon:before {width: 52px; height: 52px; font-size: 30px; line-height: 52px}
    .header.icon .title {margin-left: 52px}

    .header.big .title {padding: 10px; font-size: 16px}
    .header.big .meta {position: static}
    .header.big .meta .date {padding: 0 10px; font-size: 14px; line-height: 30px}
    .header.big .meta .category {padding: 0 10px; font-size: 14px; line-height: 30px}

    .header .icon {height: 52px; width: 52px; line-height: 52px}
    .header .icon img {height: 30px; width: 30px}
}


/*
 * Figure image
 */
div.image {clear: both; margin-top: 28px; text-align: center}
figure.image {position: relative; vertical-align: top}
figure.image.left {float: left; display: table; width: 1px; margin-right: 36px; margin-bottom: 10px}
figure.image.right {float: right; display: table; width: 1px; margin-left: 36px; margin-bottom: 10px}
figure.image figcaption {padding: 15px; border: 1px solid #bdbdbd; background: #fff; text-align: center; line-height: 1}


/*
 * Block
 */
.block {position: relative; background: #000}
.block p.background {position: relative; z-index: 1; margin: 0; padding-bottom: 90%; background: #d97d34; opacity: 0.6}
.block p.background img {position: absolute}

.block .author {position: absolute; top: 20px; right: 30px; z-index: 4}
.block .header {position: absolute; bottom: 15px; left: 15px; right: 15px; z-index: 2}
.block .more {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; z-index: 3}
.block .more a {position: relative; overflow: hidden; display: block; height: 100%; background: rgba(0, 0, 0, 0); color: #fff; font-size: 26px; font-weight: 200; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); text-align: left; text-indent: -100%; opacity: 0; white-space: nowrap}
.block .more a:focus,
.block .more a:hover {text-decoration: none; outline: none}
.block .more.text-visible a {opacity: 1; text-align: center; text-indent: 0; text-shadow: none}
.block .more.text-visible span {position: absolute; top: 50%; left: 50%; display: inline-block; padding: 8px 35px 12px; border: 1px solid #000000; border-radius: 2px; color: #000; font-size: 20px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%)}

.no-touch .block:hover .more a {opacity: 1}
.no-touch .block:hover p.background {background: #d97d34; opacity: 1}
.no-touch .block:hover p.background img {-webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1)}
.no-touch .block:hover .header .date {opacity: 0}
.no-touch .block:hover .header .category {opacity: 0}
.no-touch .block:hover .header .title {background: #000; background: rgba(0, 0, 0, 0.8); color: #fff}

.block+.block {margin-top: 20px}

.block .more a {-webkit-transition: opacity 0.25s ease, padding 0.25s ease; transition: opacity 0.25s ease, padding 0.25s ease}
.block p.background {-webkit-transition: opacity 0.25s ease, background 0.25s ease; transition: opacity 0.25s ease, background 0.25s ease}
.block p.background img {-webkit-transition: all 0.25s ease; transition: all 0.25s ease}

.mobile .block .more a {-webkit-transition: none; transition: none}
.mobile .block p.background {-webkit-transition: none; transition: none}
.mobile .block p.background img {-webkit-transition: none; transition: none}

.block.blog-block p.background {padding-bottom: 49.69%; background-color: #e5e5e5}
.block.blog-block p.background img {width: 100%; height: auto}
.block.blog-block.link-more p.background {opacity: 1}
.block.blog-block.link-more .more.text-visible span {transition: border-color 0.25s ease, color 0.25s ease}
.no-touch .block.blog-block.link-more:hover p.background {background: #e5e5e5}
.no-touch .block.blog-block.link-more:hover .more.text-visible span {border-color: #d97d34; color: #d97d34}
.block.blog-block .short-content {position: absolute; right: 15px; bottom: -100%; left: 15px; z-index: 1; opacity: 0; transition: bottom 0.75s ease, opacity 0.75s ease}
.block.blog-block .short-content > * {display: inline-block; padding: 10px; background: #fff}
.block.blog-block .header {transition: all 0.75s ease}
.block.blog-block .header .title {font-size: 28px}
body.no-touch .block.blog-block:hover .header {bottom: -100%}
body.no-touch .block.blog-block:hover .header .title {background: rgba(255, 255, 255, 0.9); color: #000}
body.no-touch .block.blog-block:hover .short-content {bottom: 15px; opacity: 1}

@media (max-width: 479px) {
    .block.blog-block .header .title {font-size: 26px}
}


/*
 * Author
 */
.author {overflow: visible; width: 88px; height: 100px; margin: 0; font-size: 14px; color: #fff; font-weight: 200; line-height: 30px; white-space: nowrap}
.author a {display: block; width: 100%; height: 100%; color: #fff}
.author a span.icon {overflow: visible; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: -999em}
.author a span.icon:before {position: absolute; top: 0; left: -10px; right: -10px; height: 100%; font-size: 102px; color: transparent; text-align: center; text-indent: 0; line-height: 100px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
.author a span.icon>span:before {position: absolute; top: 0; left: 0; right: 0; height: 100%; font-size: 40px; color: transparent; line-height: 100px; text-align: center; text-indent: 0; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}

.no-touch .author a:hover span.icon:before {color: #d97d34}
.no-touch .author a:hover span.icon>span:before {color: #fff}

.author span.name {position: absolute; top: 50%; right: 100%; display: block; margin: -17px 5px 0 0; padding: 0 15px; background: #000; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}


/*
 * Highlighted
 */
p.highlighted {color: #000; font-size: 20px}


/*
 * Hexagon ordered list
 */
ol.hexagons {counter-reset: hexagon-list}
ol.hexagons>li {position: relative; padding: 6px 0 7px 50px; counter-increment: hexagon-list}
ol.hexagons>li+li {margin-top: 10px}
ol.hexagons>li:after {content: counter(hexagon-list); position: absolute; top: 0; left: 0; width: 36px; height: 36px; font-size: 14px; text-align: center; line-height: 36px}
ol.hexagons>li:before {position: absolute; top: 0; left: 0; width: 36px; height: 36px; font-size: 36px; text-align: center; line-height: 36px}


/*
 * Hexagon list
 */
.slash+.hexagon-list {margin-top: 0}
.hexagon-list {margin-left: -20px; margin-right: -20px; font-size: 1px; line-height: 0; text-align: center}
.hexagon-list>li {position: relative; display: inline-block; width: 164px; margin: 0 1em 2.5em; padding-top: 185px; font-size: 20px; vertical-align: top}
.hexagon-list>li>div {position: absolute; top: 0; left: 0; right: 0; height: 185px; color: #d97d34; font-size: 75px; font-weight: 100; line-height: 185px}
.hexagon-list>li>div img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto}
.hexagon-list>li>p {font-weight: 200; line-height: 1.2}
.hexagon-list>li:before {position: absolute; top: 0; left: -30px; right: -30px; font-size: 185px; text-align: center; line-height: 1}

.hexagon-list.big {margin-left: -80px; margin-right: -80px}
.hexagon-list.big>li {width: 260px; margin-left: 80px; margin-right: 80px; padding-top: 290px}
.hexagon-list.big>li>div {height: 290px; color: #fff; font-size: 150px; line-height: 290px}
.hexagon-list.big>li>div>* {display: none}
.hexagon-list.big>li:before {color: #d97d34; font-size: 290px}


@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1199px) {
    .hexagon-list.big>li {margin-left: 40px; margin-right: 40px}
}

@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) {
    .hexagon-list>li {width: 120px; padding-top: 130px; font-size: 16px}
    .hexagon-list>li>div {height: 130px; font-size: 60px; line-height: 130px}
    .hexagon-list>li>div img {width: 110px; height: auto}
    .hexagon-list>li:before {font-size: 130px}

    .hexagon-list.big>li {width: 180px; margin-left: 20px; margin-right: 20px; padding-top: 200px; font-size: 16px}
    .hexagon-list.big>li>div {height: 200px; font-size: 100px; line-height: 200px}
    .hexagon-list.big>li:before {font-size: 200px}
}

@media (orientation: landscape) and (max-width: 767px) {
    .hexagon-list>li {width: 100px; padding-top: 110px; font-size: 12px}
    .hexagon-list>li>div {height: 110px; font-size: 40px; line-height: 110px}
    .hexagon-list>li>div img {width: 90px; height: auto}
    .hexagon-list>li:before {font-size: 110px}

    .hexagon-list.big {margin: -40px 0 0; text-align: center}
    .hexagon-list.big>li {overflow: visible; width: 440px; margin: 40px 0; padding: 0 20px 0 200px; font-size: 12px; text-align: left}
    .hexagon-list.big>li>div {top: 50%; right: auto; height: 185px; width: 187px; margin-top: -92px; font-size: 100px; text-align: center; line-height: 185px}
    .hexagon-list.big>li>p {margin-top: 12px}
    .hexagon-list.big>li:before {top: 50%; left: 0; right: auto; margin-top: -92px; font-size: 185px}
    .hexagon-list.big>li:nth-child(2n) {padding: 0 200px 0 20px; text-align: right}
    .hexagon-list.big>li:nth-child(2n)>div {left: auto; right: 0}
    .hexagon-list.big>li:nth-child(2n):before {left: auto; right: 0}
}

@media (orientation: portrait) and (min-width: 768px) and (max-width: 1023px) {
    .hexagon-list>li {width: 120px; padding-top: 130px; font-size: 16px}
    .hexagon-list>li>div {height: 130px; font-size: 60px; line-height: 130px}
    .hexagon-list>li>div img {width: 110px; height: auto}
    .hexagon-list>li:before {font-size: 130px}

    .hexagon-list.big {margin: -40px 0 0; text-align: center}
    .hexagon-list.big>li {overflow: visible; width: 440px; margin: 40px 0; padding: 0 20px 0 200px; font-size: 12px; text-align: left}
    .hexagon-list.big>li>div {top: 50%; right: auto; height: 185px; width: 187px; margin-top: -92px; font-size: 100px; text-align: center; line-height: 185px}
    .hexagon-list.big>li>p {margin-top: 12px}
    .hexagon-list.big>li:before {top: 50%; left: 0; right: auto; margin-top: -92px; font-size: 185px}
    .hexagon-list.big>li:nth-child(2n) {padding: 0 200px 0 20px; text-align: right}
    .hexagon-list.big>li:nth-child(2n)>div {left: auto; right: 0}
    .hexagon-list.big>li:nth-child(2n):before {left: auto; right: 0}
}

@media (orientation: portrait) and (max-width: 767px) {
    .hexagon-list>li {width: 100px; padding-top: 110px; font-size: 12px}
    .hexagon-list>li>div {height: 110px; font-size: 40px; line-height: 110px}
    .hexagon-list>li>div img {width: 90px; height: auto}
    .hexagon-list>li:before {font-size: 110px}

    .hexagon-list.big {margin: -40px 0 0; text-align: center}
    .hexagon-list.big>li {overflow: visible; display: block; width: 280px; margin: 40px auto; padding: 0 0 0 110px; font-size: 12px; text-align: right}
    .hexagon-list.big>li>div {top: 0; right: auto; height: 100px; width: 100px; font-size: 50px; text-align: center; line-height: 100px}
    .hexagon-list.big>li>p {margin-top: 12px}
    .hexagon-list.big>li:before {top: 0; left: 0; right: auto; font-size: 100px}
    .hexagon-list.big>li:nth-child(2n) {padding: 0 110px 0 0; text-align: left}
    .hexagon-list.big>li:nth-child(2n)>div {left: auto; right: 0}
    .hexagon-list.big>li:nth-child(2n):before {left: auto; right: 0}
}


/*
 * Blog entries
 */
ul.blog-entries {margin: -1px 0 0 -1px}
ul.blog-entries>li {float: left; width: 50%; border: 1px solid #fff; border-width: 1px 0 0 1px; transform: translate3d(0,0,0)}

ul.blog-entries>li .block {height: 100%}
ul.blog-entries>li .block p.background {height: 100%; width: 100%; padding-bottom: 45%}
ul.blog-entries>li .block p.background img {height: auto; width: 100%; transform: translate3d(0,0,0)}
ul.blog-entries>li .block .title {font-size: 16px}
ul.blog-entries>li .block .header.big .meta .date {padding: 0 10px; font-size: 14px; line-height: 30px}
ul.blog-entries>li .block .header.big .meta .category {padding: 0 10px; font-size: 14px; line-height: 30px}

ul.blog-entries.jobs>li .block p.background {padding-bottom: 25%}

.promo-box {margin-top: 50px; padding: 40px 20px; border: 2px solid #d97d34; border-radius: 4px; color: #000; text-align: center}
.promo-box strong {display: block; margin-bottom: 35px; font-size: 36px}
.promo-box .button {margin-top: 25px}

@media (max-width: 1023px) {
    ul.blog-entries>li .block .title {font-size: 36px}
    ul.blog-entries>li .block .header.big .meta .date {padding: 0 20px; font-size: 18px; line-height: 46px}
    ul.blog-entries>li .block .header.big .meta .category {padding: 0 20px; font-size: 18px; line-height: 46px}
    ul.blog-entries>li {width: 100%}
}

@media (max-width: 768px) {
    ul.blog-entries>li .block p.background {padding-bottom: 44.9%}
    ul.blog-entries>li .block .title {font-size: 16px}
    ul.blog-entries>li .block .header.big .meta .date {padding: 0 10px; font-size: 14px; line-height: 30px}
    ul.blog-entries>li .block .header.big .meta .category {padding: 0 10px; font-size: 14px; line-height: 30px}
    ul.blog-entries>li .block .author {display: none}
    
    .promo-box strong {display: block; margin-bottom: 25px; font-size: 24px}
    .promo-box .button {margin-top: 10px}
}

@media (min-width: 1366px) {
    ul.blog-entries>li .block .title {font-size: 24px}
}

@media (min-width: 1025px) {
    .columns>aside ul.blog-entries>li {width: 100%}
    .columns>aside ul.blog-entries>li .block p.background {padding-bottom: 79%}
    .columns>aside ul.blog-entries>li .block .title {font-size: 16px}
    .columns>aside ul.blog-entries>li .block .header.big .meta .date {padding: 0 10px; font-size: 14px; line-height: 30px}
    .columns>aside ul.blog-entries>li .block .header.big .meta .category {padding: 0 10px; font-size: 14px; line-height: 30px}
    .columns>aside ul.blog-entries>li .block .author {display: none}
}


/*
 * New blog
 */

/* Slider */
.blog-slide {position: relative; display: block; max-width: 1128px}
.blog-slide img {height: auto}
.blog-slide .blog-content {position: absolute; right: 15px; bottom: 15px; left: 15px; opacity: 0; padding: 22px 32px 25px; background: rgba(255, 255, 255, .9); color: #000; transition: opacity .25s ease}
.blog-slide .title {margin-bottom: 22px; font-size: 30px; font-weight: 700; line-height: 36px}
.blog-slide .text {font-size: 16px; line-height: 24px}
.blog-slider.owl-carousel:not(.owl-loaded) {display: block}
.blog-slider.owl-carousel:not(.owl-loaded) .blog-slide {margin: 0 auto}
.blog-slider .owl-item.center .blog-slide .blog-content {opacity: 1}
@media (max-width: 719px) {
    .blog-slide .blog-content {padding-top: 12px; padding-bottom: 15px}
    .blog-slide .title {margin-bottom: 0; font-size: 22px; line-height: 26px}
    .blog-slide .text {display: none}
}

.blog-category-title {text-align: center}
.blog-category-title h1 {color: #000; font-size: 48px; font-weight: 100}
.blog-category-title h1:before {display: inline-block; margin-top: -15px; color: #dadada; font-size: 60px; vertical-align: middle}
.blog-category-title h2 {margin-bottom: 30px; padding-top: 30px; color: #000; font-size: 30px}
.blog-category-title h2:before {display: inline-block; margin-top: -5px; color: #dadada; font-size: 42px; vertical-align: middle}

.blog-list {margin: 0}
.blog-item {padding: 51px 20px 64px; background: #fff; border-bottom: 1px solid #eee; transition: background .25s ease}
.blog-entry {max-width: 1000px; margin: 0 auto}
.blog-entry figure {margin-top: 8px}
.blog-entry img {width: 100%; height: auto}
.blog-entry .blog-title a {color: #000; font-size: 30px; line-height: 36px; transition: color .25s ease}
.blog-entry .blog-teaser {margin-top: 17px; color: #333; font-size: 14px; line-height: 20px; transition: color .25s ease}
.blog-entry .blog-info {display: inline-block; margin-top: 39px; border: 1px solid #eee; border-radius: 2px}
.blog-entry .blog-info li {padding: 0 14px; border-right: 1px solid #eee; color: #999; font-size: 14px; font-weight: 200; line-height: 32px; transition: color .25s ease}
.blog-entry .blog-info li:last-child {border-right: 0}
.blog-entry .blog-info a {color: #999}
.blog-item:hover {background: #f5f5f5}
.blog-item:hover .blog-title a,
.blog-item:hover .blog-teaser,
.blog-item:hover .blog-info li,
.blog-item:hover .blog-info a {color: #000}
.blog-item:hover .blog-info,
.blog-item:hover .blog-info li {border-color: #ccc}
@media (max-width: 959px) {
    .blog-entry .blog-info {width: 50%}
    .blog-entry .blog-info li {width: 100%; margin: 0; border-right: 0; border-bottom: 1px solid #eee}
    .blog-entry .blog-info li:last-child {border-bottom: 0}
}
@media (max-width: 719px) {
    .blog-entry .blog-info {width: 100%}
}

/* Pagination */
.pagination {margin: 64px 0 57px; text-align: center}
.pagination ul {display: inline-block}
.pagination .item {display: block; width: 32px; height: 32px; margin-left: -1px; border: 1px solid #eee; color: #666; font-weight: 700; line-height: 32px}
.pagination li:first-child .item {margin-left: 0}
.pagination .item:hover,
.pagination .item.active {position: relative; z-index: 2; border-color: #d97d34; color: #d97d34; text-decoration: none}

/* Subscribe block */
.subscribe-block {padding: 52px 0 75px; background: #eee; text-align: center}
.subscribe-block .subscribe-container {max-width: 1000px; margin: 0 auto}
.subscribe-block .text {padding: 0 20px 3px; color: #000; font-size: 30px}
.subscribe-block .button {padding-right: 47px; padding-left: 47px; text-transform: none}

/* Blog archive info */
.blog-archive-info {padding: 17px 0 22px; background: #d97e34; border-bottom: 1px solid #eee; color: #fff; font-size: 24px; line-height: 28px; text-align: center}
.archive-container {max-width: 1000px; margin: 0 auto; padding: 0 20px}
.blog-archive-info p {margin: 0}
.blog-archive-info a {color: #fff; text-decoration: underline}
body.no-touch .blog-archive-info a:hover {text-decoration: none}


/*
 * Portfolio list
 */
ul.portfolio-list {margin: -1px 0 0 -1px; perspective: 1800px}
ul.portfolio-list>li {float: left; width: 25%; border: 1px solid #fff; border-width: 1px 0 0 1px}
ul.portfolio-list>li.hidden {opacity: 0; -webkit-transform: scale3d(0.9, 0.9, 1); transform: scale3d(0.9, 0.9, 1)}
ul.portfolio-list>li img {width: 100%; height: auto}

ul.portfolio-list>li {-webkit-transition: all 0.25s ease; transition: all 0.25s ease}

@media (max-width: 1599px) {
    ul.portfolio-list>li .header .title {font-size: 24px}
}

@media (max-width: 1023px) {
    ul.portfolio-list>li {width: 33.33%}
}

@media (max-width: 767px) {
    ul.portfolio-list>li {width: 50%}
}

@media (max-width: 479px) {
    ul.portfolio-list>li {width: 100%}
}


/*
 * Members list
 */
ul.members-list {margin: -1px 0 200px -1px; perspective: 1800px}
ul.members-list>li {float: left; width: 25%; border: 1px solid #2d2d2d; border-width: 2px 0 0 2px}
ul.members-list>li .avatar {position: relative; background: #000}
ul.members-list>li .avatar p.background {position: relative; z-index: 1; margin: 0; padding-bottom: 100%; background: #d97d34; -webkit-transition: all 0.5s ease; transition: all 0.5s ease}

ul.members-list>li img {position: absolute; left: 0; width: 100%; height: auto}
ul.members-list>li .header {position: absolute; top: 15px; right: 15px; bottom: 15px; left: 15px; z-index: 2; opacity: 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease}
ul.members-list>li .header .name {position: absolute; top: 50%; left: 0; display: inline-block; width: 100%; font-size: 34px; font-weight: 200; text-transform: uppercase; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
ul.members-list>li .header .name > span {display: block; color: #d97d34; font-size: 20px; font-weight: 400; text-transform: lowercase}

ul.members-list>li:hover .avatar p.background {opacity: 0.4}
ul.members-list>li:hover .header {opacity: 1}

@media (max-width: 1599px) {
    ul.members-list>li .header .name {font-size: 24px}
    ul.members-list>li .header .name span {font-size: 15px}
}

@media (max-width: 1023px) {
    ul.members-list>li {width: 33.33%}
}

@media (max-width: 767px) {
    ul.members-list>li {width: 50%}
}

@media (max-width: 479px) {
    ul.members-list>li {width: 100%}
}


/*
 * Logo list
 */
div.logo-grid {margin: auto}
div.logo-grid>ul {overflow: hidden; margin: -1px 0 0 -1px; padding: 0; list-style: none}
div.logo-grid>ul>li {overflow: hidden; position: relative; float: left; width: 25%; border: 1px solid #e1e1e1; border-width: 1px 0 0 1px; text-align: center}
div.logo-grid>ul>li:before {content: ''; display: block; width: 100%; padding-bottom: 46%}
div.logo-grid>ul>li img {position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: auto; background: #fff}
div.logo-grid>ul>li img+img {position: absolute; top: 0; left: 0; z-index: 1}
div.logo-grid>ul>li+li+li+li+li+li+li+li+li+li+li+li+li {display: none}

@media (min-height: 901px) {
    .safari.desktop div.logo-grid>ul>li {height: 140px}
}

@media (orientation: landscape) and (max-height: 900px) {
    div.logo-grid>ul>li+li+li+li+li+li+li+li+li {display: none}
}

@media (orientation: landscape) and (max-width: 1023px) {
    div.logo-grid {margin-left: -20px; margin-right: -20px}
    div.logo-grid>ul>li {width: 25%}
    div.logo-grid>ul>li+li+li+li+li {display: none}
}

@media (orientation: landscape) and (max-width: 767px) {
    div.logo-grid {margin-left: -20px; margin-right: -20px}
    div.logo-grid>ul>li {width: 33.33%}
    div.logo-grid>ul>li+li+li+li {display: none}
}

@media (orientation: landscape) and (max-width: 567px) {
    div.logo-grid {margin-left: -20px; margin-right: -20px}
    div.logo-grid>ul>li {width: 50%}
    div.logo-grid>ul>li+li+li {display: none}
}

@media (orientation: portrait) and (min-height: 1024px) {
    div.logo-grid>ul>li {width: 33.33%}
}

@media (orientation: portrait) and (min-height: 768px) and (max-height: 1023px) {
    div.logo-grid>ul>li {width: 33.33%}
    div.logo-grid>ul>li+li+li+li+li+li+li+li+li+li {display: none}
}

@media (orientation: portrait) and (min-height: 640px) and (max-height: 767px) {
    div.logo-grid {margin-left: -20px; margin-right: -20px}
    div.logo-grid>ul>li {width: 33.33%}
    div.logo-grid>ul>li+li+li+li+li+li+li {display: none}
}

@media (orientation: portrait) and (max-height: 639px) {
    div.logo-grid {margin-left: -20px; margin-right: -20px}
    div.logo-grid>ul>li {width: 50%}
    div.logo-grid>ul>li+li+li+li+li {display: none}
}


/*
 * Contact
 */
div.contact {position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: 470px; background: #fff}
div.contact dd.winnie-the-pooh {position: absolute; top: -999em; left: -999em; visibility: hidden}
div.contact .content {padding: 50px}
div.contact .content.loading {height: 100%; min-height: 200px; background: transparent url('http://static.merixstudio.com/images/preloader.png?ee25c5144e62') no-repeat 50% 50%}
div.contact .content.loading>* {display: none}

div.contact .thanks {text-align: center}
div.contact .thanks h2 {margin: 0; font-size: 30px; font-weight: 100}
div.contact .thanks h2+p {margin-top: 10px}
div.contact .thanks .close {position: absolute; top: 20px; right: 20px}

@media (max-width: 1023px) {
    div.contact {position: static; width: auto}
    div.contact .scrollable {position: static; width: auto}
}

@media (max-width: 479px) {
    div.contact .content {padding: 50px 20px}
}


/*
 * Contact info
 */
ul.contact-info {padding: 25px 30px; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; font-size: 17px}
ul.contact-info>li {position: relative; overflow: visible; padding-left: 65px}
ul.contact-info>li+li {margin-top: 20px}
ul.contact-info>li:before {position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin-top: -15px; color: #a4a4a4; font-size: 30px; line-height: 30px}

div.contact ul.contact-info {margin-left: -50px; margin-right: -50px; padding-left: 50px; padding-right: 50px}


/*
 * Invitation
 */
*+.invitation {margin-top: 30px}
.invitation {padding: 30px 0; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada}


/*
 * Maps
 */
.maps {position: absolute; top: 0; right: 470px; bottom: 0; left: 0}
.maps>div {position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; width: 50%}
.maps>div+div {left: auto; right: 0}
.maps>div>div {position: absolute; top: 0; right: 0; bottom: 0; left: 0}
.maps>div>div [class] {overflow: visible}
.maps>div h2 {position: absolute; top: 40px; left: 65px; z-index: 2; padding: 16px 25px; background: #fff; background: rgba(255, 255, 255, 0.9); white-space: nowrap}
.maps>div a.close {position: absolute; right: 65px; top: 40px; z-index: 2; width: 68px; height: 68px; background-color: #fff; background-color: rgba(255, 255, 255, 0.9)}
.maps>div a.close.hidden {display: none}
.maps>div div.map-overlay {z-index: 1; background: rgba(0, 0, 0, 0.3)}
.maps>div div.map-overlay.hidden {display: none}

ul.markers {display: none}

.js .maps>div h2,
.js .maps>div div.map-overlay {cursor: pointer}
.js .maps>div.active h2 {cursor: default}

@media (orientation: landscape) and (max-width: 1279px) {
    .maps>div {bottom: auto; right: 0; width: auto !important; height: 50%}
    .maps>div+div {left: 0; top: auto; bottom: 0}
}

@media (max-width: 1023px) {
    .maps {display: none}
}

@media (orientation: portrait) {
    .maps>div {bottom: auto; right: 0; width: auto !important; height: 50%}
    .maps>div+div {left: 0; top: auto; bottom: 0}
}


/*
 * Annotation
 */
.annotation {position: relative; padding: 60px 0 60px 260px}
.annotation:before {position: absolute; top: 50%; left: -24px; transform: translateY(-50%); font-size: 256px; color: #eee; line-height: 1}
.annotation p:first-child {font-size: 26px}
.safari.desktop .annotation:before {top: 60%}

@media (max-width: 767px) {
    .annotation {padding: 30px 0}
    .annotation:before {display: none}
    .annotation p:first-child {font-size: 16px}
}


/*
 * Tooltip
 */
.tooltip {overflow: visible; position: absolute; z-index: 1000}
.tooltip>div {position: absolute; left: 0; bottom: 0}
.tooltip>div>div {position: relative; left: -50%; bottom: 0; padding: 0 15px; background: #000; color: #fff; font-size: 16px; line-height: 30px; white-space: nowrap}
.tooltip>div>div:before {content: ''; position: absolute; top: 100%; left: 50%; margin: 0 0 0 -5px; border-top: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent}


/*
 * Steps
 */
.step-content {padding-top: 30px}
.js .step-content {opacity: 0.25; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease}
.js .step-content.active {opacity: 1}


/*
 * Message
 */
.message {display: none; position: fixed; bottom: -1px; left: 0; right: 0; z-index: 1001; overflow: visible /* Android bugfix */; margin: 0; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 14px}
.message p {position: relative; z-index: 10; max-width: 960px; margin: 0 auto; padding: 20px 60px 20px 50px}
.message .close {position: absolute; top: 0; right: 0; width: 60px; height: 60px; padding: 20px}


.message--active {
    display: block;
}

@media (max-width: 767px) {
    .message p {padding-left: 20px}
}

/* Iframe bugfix */
iframe[name="google_conversion_frame"] {position: absolute; top: 0}

.image-banner {
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    text-align: center;
}
.image-banner img {
    width: 100%;
}

.section-heading {
    margin-bottom: 24px;
    font-size: 56px;
    font-weight: 600;
    text-align: center;
    color: #000;
}

@media (max-width: 1270px) {
    .section-heading {
        font-size: 28px;
    }
}

.form__main-header,
.form__sub-header {
    overflow: visible;
    display: block;
    font-size: 48px;
    margin: 0 0 14px;
}

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

.form__sub-header {
    display: inline-block;
    margin-top: 16px;
    font-size: 28px;
}

@media (max-width: 719px) {
    .form__main-header {
        font-size: 32px;
    }

    .form__sub-header {
        font-size: 20px;
    }
}

#we-are {
    position: relative;
    background-color: #f7f7f7;
}
#we-are article {
    padding: 50px 0;
    text-align: center;
}


#we-are .slash {
    margin-bottom: 45px;
}

#we-are .about-us-header {
    margin: 20px 0;
    font-size: 30px;
    color: #d97d34;
    font-weight: 400;
    word-break: break-before;
}
#we-are .about-us-header--secondary {
    font-size: 24px;
}

#we-are .about-us-text {
    padding: 0 16px;
    color: #000;
    font-size: 20px;
}

#we-are .image-container {
    width: 175px;
    margin: 32px auto 0;
}

#we-are .image-container img {
    width: 100%;
}

@media (max-width: 1279px) {
    #we-are article {
        position: relative;
    }

    #we-are .about-us-header {
        font-size: 23px;
    }

    #we-are .about-us-header--secondary {
        font-size: 17px;
    }
}

/*
 * Forms and form elements
 */
textarea {resize: none}
input[type="text"],
input[type="password"] {height: 36px}

textarea,
input[type="text"],
input[type="password"] {width: 100%; padding: 0 10px; border: none; /* border-top: 1px solid #f2f2f2; */ border-bottom: 1px solid #dadada; background: #f2f2f2; font-size: 14px}

textarea {padding-right: 0}

.form__field--error input,
textarea.error,
input[type="text"].error,
input[type="password"].error {border-bottom: 1px solid #f85a5a; border-top: 1px solid #f85a5a; background: #FFE7E7; color: #951414}

.form__field--error .radio span {
	color: #f85a5a;
	/* background-color: #FFE7E7; */
}


textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {border-bottom: 1px solid #000; /* border-top: 1px solid #000; */ background: #fff; color: #000}

label.error {color: #951414}
label.placeholder {padding: 0 10px; font-size: 14px; text-transform: lowercase; line-height: 36px}

body.js label.placeholder {position: absolute; z-index: 2; display: none; width: 100%; height: 100%}
body.js label.placeholder.error {display: block}
body.js label.placeholder.error+.placeholder {display: none}
body.js label.placeholder.error~input {color: transparent}
body.js label.placeholder.placeholder-visible {display: block}

form {overflow: visible; font-size: 14px;}
*+form {margin-top: 30px}
dd {position: relative}
dd+* {margin-top: 30px}

.required {color: #d97d34}

.scrollbar-wrapper.textarea {border-top: 1px solid #f2f2f2; border-bottom: 1px solid #dadada; background: #f2f2f2}
.scrollbar-wrapper.textarea.error {border-top: 1px solid #f85a5a; border-bottom: 1px solid #f85a5a; background: #FFE7E7}
.scrollbar-wrapper.textarea.focus {/* border-top: 1px solid #000; */ border-bottom: 1px solid #000; background: #fff}
.scrollbar-wrapper .textarea-wrapper textarea {border: none}


/*
 * Contact form
 */
form.contact textarea {height: 168px}

form.contact .columns .columns {border-spacing: 0; table-layout: auto}
form.contact .columns .columns .captcha {width: auto; padding-right: 30px; white-space: nowrap}
form.contact .columns .columns .captcha input {width: 90px}
.form {
	overflow: visible;
}

.form--hidden {
	display: none;
}

.form-container {
	overflow: visible;
	/* width: 440px; */
	width: 700px;
	max-width: 100%;
	padding: 8px;
	margin: 0 auto;
}

.recruitment-form {
	padding-bottom: 60px;
}

@media (max-width: 719px) {
	.recruitment-form {
		padding-bottom: 4px;
	}
}

.form__row {
	overflow: visible;
	position: relative;
	margin-bottom: 32px;
}

.form__row--dropzone {
	margin-bottom: 8px;
}

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

.form-column {
	display: inline-block;
	width: 35%;
	float: left;
}
.form-column:nth-child(2) {
	width: 65%;
}

.form__row label {
	position: relative;
	display: inline-block;
	width: 35%;
	padding-right: 4px;
	margin-top: 2px;
	margin-bottom: 8px;
	text-transform: uppercase;
	vertical-align: top;
	font-weight: 700;
	font-size: 12px;
	color: #666;
}

.form__row label.radio {
	width: 100%;
}

.form__row input,
.form__row textarea {
	display: inline-block;
	vertical-align: middle;
	width: 60%;

	/* float: left; */
}

.form__row .form__field--full-width input,
.form__row .form__field--full-width textarea {
	width: 100%;
}

.form__field--half-width {
	width: 50%;
	float: left;
	text-align: left;
}

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

.form__field--half-width.form__field--right .button {
	margin-right: 10%;
}

@media (max-width: 1270px) {
	.form__field--half-width {
		width: 100%;
		float: none;
		text-align: center;
	}
	.form__field--half-width + .form__field--half-width {
		margin-top: 32px;
	}

	.form__field--half-width.form__field--right .button {
		margin-right: 0;
	}
/* 
	.form-column {
		display: block;
		width: 100%;
	}
	 */
}

/* .form__row--required label:not(.error-message):after { */
.form__row--required .form__question:after,
.form__row--required > label:first-of-type:not(.error-message):after,
.form__row--required .form-column > label:first-of-type:not(.error-message):after,
.form__row--required > .form__field > label:first-of-type:not(.error-message):after {
	content: '*';
/* 	position: absolute;
	bottom: 0;
	right: -10px; */
	width: 0;
	display: inline-block;
	padding-left: 2px;
	color: #d97d34;
	white-space: nowrap;
	word-break: keep-all;
}

.form__row label:first-letter {
	text-transform: capitalize;
}

.form__row ul {
	padding-left: 0;
}

.form__row .options-list {
	min-height: 100px;
}

.form__row li {
	position: relative;
	list-style-type: none;
}

.form__row li input + label {
	display: inline-block;
	padding-left: 8px;
}

.form__row .comment {
	opacity: 0;
	height: 0;
	transition: all .3s ease;
}

.form__row .comment--active {
	opacity: 1;
	height: 110px;
	padding: 8px;
}

.form__row .button {
	max-width: 100%;
	text-transform: capitalize;
	font-weight: 700;
	padding-left: 70px;
	padding-right: 70px;
}

.form__row .button.button-icon {
	padding-left: 20px;
	padding-right: 20px;
}

@media (max-width: 1270px) {
	.form__row .button {
		width: 100%;
		max-width: 320px;
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* Radio style */
input[type='radio'] {position: absolute; visibility: hidden;}
.radio .fake-radio {position: absolute; display: inline-block; overflow: hidden; top: 1px; left: 0; width: 20px; height: 20px; cursor: pointer; vertical-align: middle; white-space: nowrap; text-indent: -99em; border: 1px solid #dcdcdc; border-radius: 20px; background: #fff;}
.radio .fake-radio:before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; width: 10px; height: 10px; margin: auto; transition: background .25s ease; border-radius: 10px; background: transparent;}
.radio--checked .fake-radio:before,
input[type='radio']:checked + .fake-radio:before {background: #d97d34;}
label.radio {font-size: 14px;}
label .fake-label {
	margin: 0;
	padding: 0 16px 0 32px;
	display: inline-block;
}

@media (max-width: 1270px) {
	label .fake-label {
		padding-top: 2px;
		font-size: 12px;
		line-height: 18px;
	}
}

@media (max-width: 719px) {
	.form-column {
		display: inline-block;
		width: 37%;
		float: left;
	}
	
	.form-column label {
		width: 100%;
	}

	.form-column:nth-child(2) {
		width: 63%;
	}
}
.form__row .error-message {
	display: block;
	clear: both;
	margin-top: 8px;
	font-size: 12px;
	color: #f85a5a;
}

.form__field textarea:not(.comment) {
	padding-top: 8px;
}

.form__field--error textarea:not(.comment):focus,
.form__field--error input:focus {
	background: #FFE7E7;
}

.form__field--error textarea:not(.comment) {
	color: #f85a5a;
	border-color: #f85a5a;
	background: #FFE7E7;
}

.form__field textarea:not(.comment)::-moz-placeholder,
.form__field input[type="text"]::-moz-placeholder {
  color: #000;
}

.form__field--error textarea:not(.comment)::-moz-placeholder,
.form__field--error input[type="text"]::-moz-placeholder {
  color: #f85a5a;
  border-color: #f85a5a;
  background: #FFE7E7;
}

.form__field textarea:not(.comment):focus::-webkit-input-placeholder,
.form__field input[type="text"]:focus::-webkit-input-placeholder {
  color: #000;
}

.form__field textarea:not(.comment):focus:-ms-input-placeholder,
.form__field input[type="text"]:focus:-ms-input-placeholder {
  color: #000;
}

.form__field--error textarea:not(.comment)::-webkit-input-placeholder,
.form__field--error input[type="text"]::-webkit-input-placeholder {
  color: #f85a5a;
  border-color: #f85a5a;
  background: #FFE7E7;
}

.form__field--error textarea:not(.comment):-ms-input-placeholder,
.form__field--error input[type="text"]:-ms-input-placeholder {
  color: #f85a5a;
  border-color: #f85a5a;
  background: #FFE7E7;
}



.form__row .form__field--dropzone .error-message {
  text-align: right;
  padding-right: 32px;
}

@media (max-width: 720px) {
  .form__row .form__field--dropzone .error-message {
    padding-right: 16px;
  }
}

.required-fields-info .required {
	font-size: 15px;
	color: #F9A868;
}

/*
 * Modal windows
 */
div.overlay {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100}
div.overlay>div.overlay-content {overflow: auto; overflow-y: scroll; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 100px; -webkit-overflow-scrolling: touch}
div.overlay>div.overlay-background {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; background: rgba(0, 0, 0, .8)}

div.modal {overflow: visible; position: relative; display: none; width: 100%; max-width: 860px; margin: auto; padding: 50px; background: #fff}
div.modal h2 {margin-top: 0; margin-right: 50px}

div.overlay div.modal {display: block}
div.overlay div.modal:after {content: ''; position: absolute; top: 100%; left: 100%; width: 100px; height: 100px}

div.modal .close {position: absolute; top: 30px; right: 30px}

@media (max-width: 767px) {
    div.overlay>div.overlay-content {padding: 10px}
    div.overlay div.modal:after {width: 10px; height: 10px}
    div.modal {padding: 20px}
    div.modal h2 {margin-right: 30px}
    div.modal .close {top: 20px; right: 20px}
}

/*
 * The End
 */
/*
 * WYSIWYG editor styles
 */
.wysiwyg {overflow: visible}
.wysiwyg ul {overflow: visible; list-style: none; color: #646464; padding-left: 0}
.wysiwyg ul>li {position: relative; padding: 6px 0 7px 50px}
.wysiwyg ul>li+li {margin-top: 10px}
.wysiwyg ul>li:before {position: absolute; top: 0; left: 0; width: 36px; height: 36px; color: #d97d34; font-family: 'iconvault'; font-size: 36px; line-height: 36px; text-align: left}

.wysiwyg ol {list-style: none; counter-reset: hexagon-list; padding-left: 0}
.wysiwyg ol>li {position: relative; padding: 6px 0 7px 50px; counter-increment: hexagon-list}
.wysiwyg ol>li+li {margin-top: 10px}
.wysiwyg ol>li:after {content: counter(hexagon-list); position: absolute; top: 0; left: 0; width: 36px; height: 36px; font-size: 14px; text-align: center; line-height: 36px}
.wysiwyg ol>li:before {position: absolute; top: 0; left: 0; width: 36px; height: 36px; font-size: 36px; text-align: center; line-height: 36px}

.wysiwyg img {max-width: 100%; height: auto}
.wysiwyg figure img {max-width: none; height: auto}

.wysiwyg .social-area {overflow: visible; margin-top: 60px; border-top: 1px solid #d1d1d1}
.wysiwyg .social-area:after {content: ''; clear: both; display: table}
.wysiwyg .social-area>div {float: left; width: 100%; padding-top: 50px}
.wysiwyg .social-area .author {position: relative; float: right; margin-left: 200px}
.fb-like,
.fb-like * {overflow: visible}

.wysiwyg ul.social-buttons {overflow: visible; float: left}
.wysiwyg ul.social-buttons>li {float: left; margin-top: 0; padding-right: 30px; padding-left: 0}
.wysiwyg ul.social-buttons>li:before {content: none}

article.wysiwyg {max-width: 1328px; margin: 0 auto; padding: 50px 20px}
article.wysiwyg h1 {margin-top: 0; margin-bottom: 50px; color: #000; font-size: 42px; font-weight: 200; line-height: 1}

.wysiwyg *+pre {margin-top: 28px;}

.badge {position: absolute; top:50%; z-index:9999; margin-top: -52px}
.badge.left {left: 0}
.badge.right {right: 0}
.badge a {
    display:block;
    text-indent:100%;
    background-repeat:no-repeat;
    background-position: 0 0;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: clip;
}

#polishchristmasguide a {
    width:106px;
    height:108px;
    background-image:url('http://static.merixstudio.com/images/ribbons/xmas_badge.png?3dd01a46a052');
}

#awwwards a {
    width:70px;
    height:105px;
}


/* Black */

#awwwards.left.black a {
    background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_black_left.png?bd32d32f355e');
}
#awwwards.right.black a {
    background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_black_right.png?bd32d32f355e');
}

/* White */

#awwwards.left.white a {
    background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_white_left.png?bd32d32f355e');
}
#awwwards.right.white a {
    background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_white_right.png?bd32d32f355e');
}

/* Green */

#awwwards.left.green a {
    background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_green_left.png?bd32d32f355e');
}
#awwwards.right.green a {
    background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_green_right.png?bd32d32f355e');
}


/* MEDIA QUERIES */

/* Landscape phone to portrait tablet */

@media (max-width: 1023px) {

    /* hidden */
    .badge {
        display: none;
    }

}

/* Retina Displays */

/* Target any device with retina display (ie iPad 3 and MacBook Pro) */

@media
only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

    .badge a {
        -moz-background-size: 70px 105px;
        -ie-background-size:70px 105px;
        -o-background-size:70px 105px;
        -webkit-background-size:70px 105px;
        background-size:70px 105px;
    }

    /* Gray */

    .badge.left.black a {
        background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_black_left2x.png?bd32d32f355e');
    }
    .badge.right.black a {
        background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_black_right2x.png?bd32d32f355e');
    }

    /* White */

    .badge.left.white a {
        background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_white_left2x.png?bd32d32f355e');
    }
    .badge.right.white a {
        background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_white_right2x.png?bd32d32f355e');
    }

    /* Green */

    .badge.left.green a {
        background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_green_left2x.png?bd32d32f355e');
    }
    .badge.right.green a {
        background-image:url('http://static.merixstudio.com/images/ribbons/awwwards_honorable_green_right2x.png?bd32d32f355e');
    }
}

.compare-slider {margin-top: 28px}

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px; }

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s; }

.twentytwenty-before-label, .twentytwenty-after-label {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  color: white;
  font-size: 13px;
  letter-spacing: 0.1em; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }

.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 50%;
  margin-top: -19px; }

.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
  top: 50%;
  margin-top: -6px; }

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
  left: 50%;
  margin-left: -6px; }

.twentytwenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none; }
  .twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block; }
  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0); }
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
      opacity: 0; }
  .twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }

.twentytwenty-before-label {
  opacity: 0;
  display: none;}
  .twentytwenty-before-label:before {
    content: "Before"; }

.twentytwenty-after-label {
  opacity: 0;
  display: none;}
  .twentytwenty-after-label:before {
    content: "After"; }

.twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 10px; }

.twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 10px; }

.twentytwenty-vertical .twentytwenty-before-label:before {
  top: 10px; }

.twentytwenty-vertical .twentytwenty-after-label:before {
  bottom: 10px; }

.twentytwenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25; }
  .twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0.5); }
    .twentytwenty-overlay:hover .twentytwenty-after-label {
      opacity: 1; }
    .twentytwenty-overlay:hover .twentytwenty-before-label {
      opacity: 1; }

.twentytwenty-before {
  z-index: 20; }

.twentytwenty-after {
  z-index: 10; }

.twentytwenty-handle {
  height: 38px;
  width: 38px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer; }

.twentytwenty-horizontal .twentytwenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
  top: 50%;
  margin-top: 22px;
  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-vertical .twentytwenty-handle:before {
  left: 50%;
  margin-left: 22px;
  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
  right: 50%;
  margin-right: 22px;
  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px; }

.twentytwenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px; }

.twentytwenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px; }

.twentytwenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px; }

.range-container {
  z-index: 6;
	position: relative;
	display: inline-block;
	overflow: visible;
  height: 19px;
	border-radius: 10px;
	overflow: hidden;
  border: 1px solid #e5e5e5;
	/* transform: translateY(-100%); */
	width: 400px;
	max-width: 100%;
	vertical-align: top;
}

.range-track-fill {
	/* z-index: 3; */
	pointer-events: none;

	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 0;
	height: 22px;
	transition: width .3s ease-out;
}

.range-track-fill:after {
	content: '';
  	z-index: 10;
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	display: inline-block;
	height: 18px;
	border-radius: 10px;
	background-color: #d97d34;
}

.edge .range-track-fill:after,
.ios .range-track-fill:after {
	top: 2px;
}

.range-track-frame {
  display: block;
  height: 19px;

  pointer-events: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0.7px 0;
  overflow: hidden;
  
}

.values-list {
	position: absolute;
	top: 0;
	left: -5.68%;
	right: -5.68%;
	z-index: 0;
	letter-spacing: 0;
}

.values-list .value-setter {
  position: relative;
	display: inline-block;
	width: 16.66%;
	float: left;
	text-align: center;
  height: 0;
	padding-bottom: 18px;
	font-size: 0;
	line-height: 0;
}

.values-list .value-setter:after {
  content: '';
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  /* margin-top: -5px; */
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background-color: #e9e9e9;
  border-radius: 100%;
}
.progress-bar {
  overflow: initial;
  position: fixed;
  z-index: 9;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background-color: #eee;
  margin: 40px 0;
}

@media (max-width: 719px) {
  .progress-bar {
    display: none;
  }
}

.progress-bar--vertical {
  overflow: hidden !important;
  height: auto;
  width: 20px;
  top: 535px;
  bottom: 20px;
  left: auto;
  right: 140px;
  margin:0 0 0;
  border-radius: 8px;
}

.progress-bar--vertical .progress-bar__fill {
  width: 20px;
  height: 100%;
  top: 0;
  right: 0;
  left: auto;
  transform-origin: 50% 100%;
  transform: translateY(-100%);
  border-radius: 8px;
}

.progress-bar--transparent {
  z-index: 999;
  overflow: visible !important;
  background-color: transparent;
  /* pointer-events: none; */
}

.progress-bar--transparent:before,
.progress-bar--transparent:after {
  display: none !important;
}

.progress-bar--sygnet {
  transform: translateY(-100%);
}

.progress-bar__section {
  height: 33%;
  border: 1px solid transparent;
}
/* 
.progress-bar--vertical .progress-bar__fill:after {
  content: '';
  z-index: 11;
  display: inline-block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #aaa;
}
 */
.progress-bar__sygnet {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  margin-top: 2px;
  /* opacity: 0.5; */
}

.progress-bar__label {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  margin-top: -4px;
  color: #999;
  padding-left: 16px;
  transform: translateX(100%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.progress-bar__section--active .progress-bar__label {
  color: #d97d34;
}

.progress-bar:before,
.progress-bar:after {
  content: '';
  z-index: 8;
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
  background-color: #fff;
}

.progress-bar:after {
  height: 50px;
  top: auto;
  bottom: -50px;
}


.progress-bar__fill {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  text-align: right;
  width: 100%;
  height: 20px;
  font-size: 0;
  background-color: #d97d34;
  transform-origin: 100% 50%;
  transform: translateX(-100%);
}

.progress-bar--active &__fill {
  transition: transform 50000s linear;
  transform: translateX(0) !important;
}

.progress-bar__fill:hover &__tooltip {
  opacity: 1;
}

.progress-bar__tooltip {
  overflow: visible;
  z-index: 11;
  position: absolute;
  display: inline-block;
  left: 50%;
  bottom: -55px;
  transform: translate(-50%, -50%);
}

.progress-bar__questions {
  text-align: center;
  font-size: 24px;
}



@media (max-width: 719px) {
  .progress-bar--vertical {
    display: none;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .progress-bar--vertical {
    top: 700px;
    right: 100px;
  }

  .progress-bar__label {
    font-size: 14px;
  }
}
.markers,
.form__question,
.button.show-comment-box,
.range-container {
	float: left;
}

.range-container {
	width: 60%;
}

.markers {
	width: 65%;
	margin-bottom: 16px;
	margin-left: 30%;
}

.markers ul {
	margin-left: -3.68%;
	margin-right: -5.68%;
}

.markers li {
	display: inline-block;
	width: 16.66%;
	float: left;
	text-align: center;
}

.form__row {
	clear: both;
}

.markers:after,
.form__row:after {
    content: "";
	display: table;
	clear: both;
}

.form__question {
	display: inline-block;
	vertical-align: top;
	width: 35%;
	font-size: 12px;
	padding-right: 16px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}


.form__tooltip {
	overflow: visible;
	position: absolute;
	height: 16px;
	line-height: 0;
	left: -16px;
	top: 0;
	transform: translate(-100%, 0);
}

.form__tooltip:before {
	content: '?';
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	font-size: 10px;
	text-align: center;
	background-color: #eee;
	border-radius: 100%;
}


.form__tooltip-text {
	display: none;
	overflow: visible;
	position: absolute;
	left: 50%;
	top: -16px;
	transform: translate(-50%, -100%);
	background-color: #eee;
	padding: 4px 12px;
	border-radius: 8px;
	width: 320px;
	font-size: 12px;
	line-height: 1.5;
}

.form__tooltip-text:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 7.5px 0 7.5px;
	border-color: #eee transparent transparent transparent;

}

.form__tooltip:hover .form__tooltip-text {
	display: block;
}

.button.show-comment-box {
	width: 5%;
	position: relative;
	vertical-align: middle;
	padding: 0 8px;
	border: 0;
	height: auto;
	font-size: 12px;
	line-height: 1;
	text-align: right;
	color: #999;
	line-height: 22px;
}

.button.show-comment-box:hover {
	color: #d97d34;
}

.button.show-comment-box:focus,
.button.show-comment-box:active {
	color: #666;
}

.mobile-label {
	display: none;
	vertical-align: middle;
	margin-top: -1px;
	margin-left: 8px;
	line-height: 1;
	color: #666;
}

.form__row .comment {
	position: absolute;
	width: 220px;
	top: 0;
	right: -16px;
	transform: translateX(100%);
	display: none;
}

.form__row--comment-active {
	padding-bottom: 80px;
}

.form__row .comment--active {
	display: inline-block;
	opacity: 1;
	height: auto;
}
	
@media (max-width: 1279px) {
	.button.show-comment-box {
		clear: both;
		width: 35%;
		margin: 0;

		text-align: left;
		padding-left: 0;
	}
	
	.form__row--comment-active {
		padding-bottom: 0;
	}

	.form__row .comment {
		clear: both;
		display: block;
		position: relative;
		width: 60%;
		margin-top: 16px;
		margin-right: 5%;
		margin-left: auto;
		top: auto;
		right: auto;
		transform: none;
	}

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

@media (max-width: 719px) {
	.markers {
		width: 68%;
		margin-left: 26%;
	}
	
	.button.show-comment-box {
		margin-top: 4px;
		margin-bottom: 8px;
	}

	.form-question {
		display: block;
		width: 100%;
	}
	
	.form__row {
		margin-bottom: 24px;
	}

	.form__row .comment {
		width: 100%;
		margin-top: 8px;
		margin-left: 0;
	}
}
.carousel-button {
  display: none;
  border-color: #fff;
  color: #fff;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 24px;
  font-size: 14px;
}

.carousel-button:hover {
  border-color: #fff;
  color: #fff;
}

@media (max-width: 1279px) {
  .tile__link {
    pointer-events: none;
  }


  body.touch .carousel-button {
    display: inline-block;
    pointer-events: none;
  }

  body.touch .tile--active .carousel-button {
    pointer-events: initial;
  }
}

@media (max-width: 739px) {
  .tile__link {
    pointer-events: initial;
  }

  .carousel-button {
    display: none !important;
    border-color: #000;
    color: #000;
  }

  .carousel-button:hover {
    border-color: #000;
    color: #000;
  }
}

.carousel-wrapper {
  position: relative;
  height: calc(100vh - 245px);
  overflow: hidden;
}

.carousel__options {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.carousel__next,
.carousel__previous {
  display: block;
  text-align: center;
  font-size: 0;
  background-color: transparent;
  border: 0;
}

.carousel__next:before,
.carousel__previous:before {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 50px;
  color: #fff;
  transition: all .3s ease;
}

@media (min-width: 1280px) {
  .carousel__next:hover:before,
  .carousel__previous:hover:before {
    color: #000;
  }
}

.carousel__options:hover .carousel__next:before,
.carousel__options:hover .carousel__previous:before,
.carousel__options--hovered .carousel__next:before,
.carousel__options--hovered .carousel__previous:before {
  color: #fff;
}

.carousel__options .carousel__next:hover:before,
.carousel__options .carousel__previous:hover:before {
  color: #000;
}

@media (min-width: 740px) {
  body:not(.ie) .carousel-wrapper:before,
  body:not(.ie) .carousel-wrapper:after {
    pointer-events: none;
    opacity: 1;
    content: '';
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30%;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
    transition: opacity 1s ease;
    transition-delay: 1s;
  }
}

.tile--prev:before {
  opacity: 1;
}

body:not(.ie) .carousel-wrapper:after {
/* .tile--next:before { */
  opacity: 1;
  top: auto;
  bottom: 0;
  transform: none;
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%,   rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

.carousel-wrapper .container {
  overflow: visible;
  width: 120%;
  height: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform-style: preserve-3d; */
  transform: translate(-50%, -50%);
  margin: 0 auto;
  /* border: 1px solid #CCC; */
/*   -webkit-perspective: 1500px;
     -moz-perspective: 1500px;
       -o-perspective: 1500px;
       -ms-perspective: 1500px;
          perspective: 1500px; */
  -webkit-perspective: 380px;
     -moz-perspective: 380px;
       -o-perspective: 380px;
       -ms-perspective: 380px;
          perspective: 380px;
          backface-visibility: hidden;

}

.container-background:after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: 100%;
  height: 40%;
  transform: translateY(-50%);

  background: #e09531;
  background: -moz-linear-gradient(top,  #e09531 0%, #d56a42 100%);
  background: -webkit-linear-gradient(top,  #e09531 0%,#d56a42 100%);
  background: linear-gradient(to bottom,  #e09531 0%,#d56a42 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e09531', endColorstr='#d56a42',GradientType=0 );

}

@media (max-width: 739px) {
  .carousel-wrapper .container {
    background: #fff !important;
  }
  .tile {
    border-bottom: 1px solid #eee;
  }
}

.disabled-tile {
  /* pointer-events: none; */
  position: absolute;
  z-index: 100;
  top: 28px;
  left: 50%;
  width: 100%;
  height: 40vh;
  transform: translate(-50%, -100%);
  background-color: rgba(0, 0, 0, 0.5);
}
.disabled-tile--bottom {
  top: 100%;
  transform: translate(-50%, 28px);
}

#carousel {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  position: absolute;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transform: translateZ(-96px) rotateX(0deg);
}

.ready #carousel {
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
 
}

.tile {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  font-weight: bold;
  color: white;
  text-align: center;
  opacity: 0;
   -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: rotateX(0deg) translateZ(96px);
}

.ready #carousel figure {
  margin-top: 0 !important;
  opacity: 1;

  -webkit-transition: opacity 1s, -webkit-transform 1s;
     -moz-transition: opacity 1s, -moz-transform 1s;
       -o-transition: opacity 1s, -o-transform 1s;
          transition: opacity 1s, transform 1s;

  -webkit-transition: opacity 1s;
     -moz-transition: opacity 1s;
       -o-transition: opacity 1s;
          transition: opacity 1s;

          backface-visibility: hidden;
}


.tile {
  opacity: 0;
  overflow: visible;
  z-index: 2;
  backface-visibility: hidden;
  height: 100%;
  transition: all .3s ease;
}

.ready .tile {
  opacity: 1;
}

.tile__link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tile--active {
  z-index: 100;
}

.tile--active .tile__link {
  position: relative;
  z-index: 100;
}

.tile__content {
  overflow: visible;
  position: relative;
}

.tile__content--primary {
  z-index: 100;
  position: absolute;
  left: 50%;
  /*bottom: 0;*/
  top: 60%;
  transform: translateX(-50%);
}

.tile__content--primary {
  display: block;
  position: relative;
}

.tile__content--hovered {
  /* display: none; */
}

.tile__content--mobile-static {
  margin-top: 16px;
}

.tile--force-hover .tile__content--hovered,
.tile--hovered .tile__content--hovered,
.tile--active:hover .tile__content--hovered {
  display: block;
}

@media (min-width: 740px) {
  body:not(.ie) .tile--force-hover .tile__header,
  body:not(.ie) .tile--force-hover .tile__text,
  body:not(.ie) .tile--active .tile__header,
  body:not(.ie) .tile--active .tile__text {
    color: #fff;
  }
}

.tile__container {
  overflow: visible;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1280px;
}

.tile__header {
  position: relative;
  margin: 0 0 34px;
  padding: 0 100px;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  overflow: visible;
  transition: all .3s ease;
}

.tile__header:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 175px;
  height: 1px;
  background-color: #d97d34;
  transition:  background-color .3s ease;
}

.tile--active .tile__header:after {
  background-color: #fff;
}

@media (min-width: 740px) and (max-width: 1279px) {
  .tile__container {
    /* padding-bottom: 20px; */
  }

  .tile__header {
    margin-bottom: 14px;
    padding: 0 200px;
    font-size: 32px;
  }

  .tile__header:after {
    bottom: -10px;
  }
}

@media (max-width: 739px) {
  .tile__header {
    padding: 0 20px;
    font-size: 32px;
  }
}

.tile__text {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  transition: all .3s ease;
}
.tile__text + .tile__text {
  margin-top: 2px;
}

.tile__text--absolute {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translate(-50%, -100%);
}

/* body {
  background-color: #fff;
} */

@media (max-width: 739px) {
  
  #carousel {
    position: relative;
    height: auto;
    transform: none !important;
  }

  .carousel__navigation {
    display: none;
  }

  .carousel-wrapper,
  .carousel-wrapper .container,
  .tile,
  .tile__container,
  .container {
    position: relative;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    transform: none !important;
  }

  .carousel-wrapper .container {
    overflow: hidden;
    /* border-bottom: 1px solid #ddd; */
  }

  .tile__content--primary {
      position: static;
      left: auto;
      bottom: auto;
      transform: none;
  }

  .tile {
    padding: 50px 32px;
    /* border: 1px solid #ddd; */
    /* border-width: 1px 0 0; */
  }

/*   .tile__content--hovered {
    display: block;
  } */

  .tile--force-hover .tile__content--primary,
  .tile--hovered .tile__content--primary,
  .tile--active:hover .tile__content--primary {
    display: block;
  }
  
  .tile__container {
    padding: 100px 0;
  }

  .tile__header {
    margin-bottom: 32px;
  }

  .tile--cloned {
    display: none;
  }

  .tile--prev:before,
  .tile--next:before {
    opacity: 0;
  }
  

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

}


.tile--static,
.tile--static .tile__container,
.tile--static .tile__content {
  opacity: 1;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
}

.tile--static {
  padding: 32px 0 48px;
  border-bottom: 1px solid #eee;
  color: #000;
}

.tile--static .tile__container {
  margin: 0 auto;
}

.ie .carousel-wrapper .container {
  -ms-perspective: 0;
  perspective: 0;
}

.ie .tile {
  transform-origin: 50% 100%;
  border-bottom: 1px solid #aaa;
}

.ie .carousel-wrapper {
  height: auto !important;
}

.ie #carousel {
  position: relative;
  height: auto;
  transform: none !important;
}

.ie .container-background {
  display: none;
}

.ie .tile,
.ie .tile__container,
.ie .container {
  position: relative;
  height: auto;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none !important;
  color: #000;
  width: 100%;
}

.ie .tile {
  background-color: #fff;
  transition: all .1s ease;
}

.ie .tile:hover {
  color: #fff;
  background: #e09531;
  background: -moz-linear-gradient(top,  #e09531 0%, #d56a42 100%);
  background: -webkit-linear-gradient(top,  #e09531 0%,#d56a42 100%);
  background: linear-gradient(to bottom,  #e09531 0%,#d56a42 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e09531', endColorstr='#d56a42',GradientType=0 );
}

.ie .tile:hover .tile__header:after {
  background-color: #fff;
}

.ie .tile .tile__header,
.ie .tile .tile__content > *{
  transition: all .1s ease;
}

.ie .tile:hover .tile__header,
.ie .tile:hover .tile__content > * {
  color:  #fff;
}

.ie .tile:hover *,
.ie .tile--hovered * {
  text-decoration: none;
}

.ie .tile__content {
  margin: 0 auto;
}

.ie .tile__container {
  padding: 100px 0;
  margin: 0 auto;
}

.ie .tile--cloned {
  display: none;
}



@media (max-width: 739px) {
  body.mobile.ie .tile__container {
    padding: 0;
  }

  .tile__container {
    padding: 0;
  }
  
  .tile__header {
    margin-top: 16px;
    font-size: 28px;
  }
  .mobile-separate-line {
    display: block;
  }
}


@media (min-width: 740px) {
  body.touch.job-offers-page {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}


/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #272822;
  -webkit-text-size-adjust: none;
}

.hljs-tag,
.hljs-tag .hljs-title,
.hljs-keyword,
.hljs-literal,
.hljs-strong,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.nginx .hljs-title,
.tex .hljs-special {
  color: #f92672;
}

.hljs {
  color: #ddd;
}

.hljs .hljs-constant,
.asciidoc .hljs-code,
.markdown .hljs-code {
  color: #66d9ef;
}

.hljs-code,
.hljs-class .hljs-title,
.hljs-header {
  color: white;
}

.hljs-link_label,
.hljs-attribute,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-value,
.hljs-regexp {
  color: #bf79db;
}

.hljs-link_url,
.hljs-tag .hljs-value,
.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-emphasis,
.hljs-type,
.hljs-preprocessor,
.hljs-pragma,
.ruby .hljs-class .hljs-parent,
.hljs-built_in,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-name {
  color: #a6e22e;
}

.hljs-comment,
.hljs-annotation,
.smartquote,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-decorator,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
  color: #75715e;
}

.hljs-keyword,
.hljs-literal,
.css .hljs-id,
.hljs-doctag,
.hljs-title,
.hljs-header,
.hljs-type,
.vbscript .hljs-built_in,
.rsl .hljs-built_in,
.smalltalk .hljs-class,
.diff .hljs-header,
.hljs-chunk,
.hljs-winutils,
.bash .hljs-variable,
.apache .hljs-tag,
.tex .hljs-special,
.hljs-request,
.hljs-status {
  font-weight: bold;
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5;
}

/**
 * Owl Carousel v2.1.6
 * Copyright 2013-2016 David Deutsch
 * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
 */
/*
 *  Owl Carousel - Core
 */

.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y; }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    -webkit-transform-style: preserve-3d; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    display: none; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: pointer;
    cursor: grab; 
    cursor: hand;
    }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 *  Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 *  Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url('http://static.merixstudio.com/styles/owl.video.play.png') no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }

.hr-sub-menu {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.hr-sub-menu__list {
  display: inline-block;
}

.hr-sub-menu__item {
  display: inline-block;
}

.hr-sub-menu__item:before {
  content: '\e630';
  font-family: 'iconvault';
  color: #dadada;
  font-size: 40px;
  line-height: 18px;
  vertical-align: middle;
  cursor: default;
}

.hr-sub-menu__item:first-child:before {
  display: none;
}

@media (max-width: 719px) {
  .hr-sub-menu {
    margin-bottom: 16px;
  }
  
  .hr-sub-menu__item {
    display: block;
  }

  .hr-sub-menu__link {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hr-sub-menu__item:before {
    display: none;
  }
}

.hr-sub-menu__link {
  display: inline-block;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  vertical-align: middle;
}

.hr-sub-menu__link--active {
  color: #d97d34;
}


.hr-content-section {
  position: relative;
  max-width: 1200px;
  margin: 32px auto 16px;
  text-align: center;
}

@media (max-width: 1279px) {
  .hr-content-section--mobile-hidden {
    display: none;
  }
}

.hr-content-section--no-overflow {
  overflow: visible;
}

.hr-content-section--not-margined-bottom {
  margin-bottom: 0;
}

.hr-content-section--padded-bottom {
  padding-bottom: 80px;
}

.hr-content-section--full-width {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1279px) {
  .hr-content-section--full-width {
    max-width: 100%;
  }
}
.hr-content-section--image-banner {
  margin-top: 0;
  margin-bottom: 48px;
  -webkit-background-size: cover;
  background-size: cover;

}

.banner__paragraph {
  display: block;
  margin: 80px auto 72px;
  max-width: 600px;
  font-size: 24px;
  color: #fff;
}

@media (max-width: 719px) {
  .hr-content-section .slash,
  .hr-content-section h2.slash {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 24px;
  }

  .hr-content-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hr-content-section--image-banner {
    margin-bottom: 24px;
    background-image: none !important;
    background: #e09531 !important;
    background: -moz-linear-gradient(top,  #e09531 0%, #d56a42 100%) !important;
    background: -webkit-linear-gradient(top,  #e09531 0%,#d56a42 100%) !important;
    background: linear-gradient(to bottom,  #e09531 0%,#d56a42 100%) !important;
  }

  .hr-content-section--padded-bottom {
    padding-bottom: 16px;
  }

  .banner__paragraph {
    max-width: 100%;
    padding: 0 16px;
    margin: 16px auto;
    font-size: 16px;
    text-align: left;
  }
}

@media (min-width: 720px) and (max-width: 1279px) {
  .hr-content-section .decorated-list {
    padding: 0 50px;
  }
}

/* 
.hr-content-section [class] {
  overflow: visible;
}
 */

.button-container {
  margin: 16px 0 0;
}

.owl-item {
  transition: opacity .3s ease;
}

.slider .owl-stage-outer:hover .owl-item {
  opacity: 0.5 !important;
}

.slider .owl-stage-outer .owl-item:hover {
  opacity: 1 !important;
}

.slider__item {
  overflow: visible;
  position: relative;
  font-size: 20px;
  color: #000;
  padding-bottom: 75px;
}

.slider__image-caption {
  display: none;
  position: absolute;
  height: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

@media (max-width: 1279px) {
  .owl-stage-outer:hover .owl-item {
    opacity: 1 !important;
  }

  .slider__image-caption {
    display: block;
  }
}

.slider__image-caption p {
  margin-top: 0;
}

.slider__item:hover .slider__image-caption {
  display: block;
}

.button-container .button {
  margin: 16px;
  vertical-align: middle; 
}

.button-container .button:first-letter {
  text-transform: capitalize;
}

.plain-paragraph {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}

.hr-content-section .wysiwyg ul,
.hr-content-section .wysiwyg ol {
  overflow: visible;
  margin: 0 auto 32px;
  text-align: left;
  width: 100%;
  max-width: 800px;
}

.hr-content-section .wysiwyg ul {
  color: #646464;
}

.hr-content-section .wysiwyg ul li {
  position: relative;
  padding: 6px 0 7px 50px;
  text-align: left;
}

.hr-content-section .wysiwyg ul li + .hr-content-section .wysiwyg ul li {
  margin-top: 10px;
}

.hr-content-section .wysiwyg ul li:before {
  content: '\e606';
  font-family: 'iconvault';
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  color: #d97d34;
  font-size: 36px;
  line-height: 36px;
  text-align: left;
}

.hexagons {
  overflow: visible;
  width: 100%;
/*   margin-left: -12.5%;
  margin-right: -12.5%; */
}

.hexagons:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
  
.hexagons__item {
  overflow: visible;
  position: relative;
  display: inline-block;
  width: 25%;
  float: left;
  margin-bottom: 32px;
  font-size: 0;
}

.hexagons--pyramid {
  margin: 0 auto 48px;
  text-align: center;
}

.hexagons--pyramid .hexagons__item {
  float: left;
  margin: 0 auto;
  width: 25%;
}

.hexagons--pyramid .hexagons__item:nth-child(1) {
  margin-left: 25%;
}

.hexagons--pyramid .hexagons__item:nth-child(3) {
  clear: both;
  margin-left: 12.5%;
}

.hexagons--pyramid .hexagons__item:nth-child(6) {
  clear: both;
}

.hexagons--pyramid .hexagons__row {
  margin: 0 auto;
  clear: both;
  width: 100%;
  display: block;
}

@media (max-width: 767px) {
  .hexagons--pyramid .hexagons__item:nth-child(1),
  .hexagons--pyramid .hexagons__item:nth-child(3) {
    margin-left: auto;
  }

  .hexagons--pyramid .hexagons__item:nth-child(3),
  .hexagons--pyramid .hexagons__item:nth-child(6) {
    clear: none;
  }

  .hexagons--pyramid .hexagons__item {
    width: 50%;
    margin-bottom: 32px;
  }
}

@media (max-width: 479px) {
  .hexagons--pyramid .hexagons__item {
    width: 100%;
  }
}

.hexagons__element {
  position: relative;
  width: 175px;
  margin: 0 auto;
  text-align: center;
}

.hexagons__background {
  width: 100%;
}

.hexagons__content {
  display: none;
}

.hexagons__content--primary,
.hexagons__element:hover .hexagons__content--hovered {
  display: block;
}

.hexagons__content--hovered,
.hexagons__element:hover .hexagons__content--primary {
  display: none;
}


.hexagons__inner-icon,
.hexagons__inner-text {
  overflow: initial;
  z-index: 3;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  text-align: center;
}

.hexagons__inner-text {
  font-size: 20px;
  line-height: 1.1;
  color: #fff;
}

.hexagons__inner-icon:before {
  font-size: 75px;
  color: #fff;
}


@media (max-width: 1279px) {
  .hexagons__item {
    margin-bottom: 32px;
  }

  .hexagons__inner-icon {
    top: 98px;
  }

  .hexagons__element {
    overflow: visible;
  }
  .hexagons__content--hovered {
    display: block;
    position: relative;
    margin-top: 8px;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .hexagons__content--hovered .hexagons__inner-text {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    color: #d97d34;
  }
  .hexagons__content--hovered,
  .hexagons__element:hover .hexagons__content--primary {
    display: block;
  }
  
}
@media (max-width: 719px) {
  .hexagons {
    margin-top: 0;
  }

  .hexagons__item {
    overflow: visible;
    float: none;
    width: 100%;
    margin-bottom: 56px;
    display: block;
  }

  .hexagons__item:last-of-type {
    margin-bottom: 32px;
  }
}

.decorator {
  overflow: visible;
  display: block;
  position: absolute;
  line-height: 0;
}

.decorator--top {
  top: 0;
}

.decorator--bottom {
  bottom: 0;
}

.decorator--left {
  left: 0;
}

.decorator--right {
  right: 0;
}

.decorator .decorator__image {
  max-width: 100%;
}

.decorator--bottom.decorator--left .decorator__image {
  transform-origin: 50% 100%;
}

.decorator--bottom.decorator--right .decorator__image {
  transform-origin: 50% 100%;
}

.decorator--top.decorator--left .decorator__image {
  transform-origin: 0 0;
}

.decorator--top.decorator--right .decorator__image {
  transform-origin: 100% 0;
}

.decorator__caption {
  overflow: initial;
  position: absolute;
  display: block;
  bottom: 16px;
  left: -50px;
  right: -50px;
  text-align: left;
  font-size: 16px;
  line-height: 1;
  color: #000;
}

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

@media (max-width: 1600px) {
  .decorator__image {
    transform: scale(0.55);
  }

  .decorator__caption {
    left: 0;
    right: 0;
  }
}

@media (max-width: 1279px) {
  .decorator {
    width: 20%; 
    overflow: hidden;
  }

  .decorator--bottom.decorator--left .decorator__image {
    transform-origin: 0% 100%;
  }

  .decorator--bottom.decorator--right .decorator__image {
    transform-origin: 20% 100%;
  }

  .decorator__image {
    transform: scale(1);
  }
  .decorator__caption {
    display: none;
  }
}

@media (max-width: 719px) {
  .decorator--desktop-only {
    display: none;
  }
}


.steps {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 48px;
  counter-reset: steps;
}

.steps__item {
  display: inline-block;
  float: left;
  width: 20%;
  font-weight: 600;
  text-align: center;
}

.steps__item:before {
  counter-increment: steps;
  content: counter(steps);
  display: block;
  margin: 0 auto 16px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-family: 'Titillium', 'Arial', 'Helvetica', sans-serif;
  font-size: 24px;
  color: #fff;
  border-radius: 100%;
  background: #e09531;
  background: -moz-linear-gradient(top,  #e09531 0%, #d56a42 100%);
  background: -webkit-linear-gradient(top,  #e09531 0%,#d56a42 100%);
  background: linear-gradient(to bottom,  #e09531 0%,#d56a42 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e09531', endColorstr='#d56a42',GradientType=0 );
}

.steps__item:nth-child(1):before {
  opacity: 0.15;
}

.steps__item:nth-child(2):before {
  opacity: 0.25;
}

.steps__item:nth-child(3):before {
  opacity: 0.5;
}

.steps__item:nth-child(4):before {
  opacity: 0.75;
}

@media (max-width: 959px) {
  .steps {
    margin-bottom: 0;
  }

  .steps__item {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: 32px;
  } 

  .steps__item:last-of-type {
    margin-bottom: 16px;
  }
}

.job-details {
  max-width: 960px;
  margin: 32px auto 28px;
  text-align: left;
  font-size: 0;
}

.job-details__container {
  display: inline-block;
  width: 60%;
}

.job-details__container:nth-child(2n) {
  width: 40%;
  text-align: right;
}

.job-details__container--full-width {
  width: 100%;
  text-align: center;
}

.job-details__text {
  display: inline-block;
  color: #666;
  vertical-align: bottom;
  font-size: 14px;
  text-align: left;
}

.job-details__text + .job-details__text  {
  margin-top: 0;
}

.job-details__emphasized {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  vertical-align: bottom;
  color: #d97d34;
  font-style: normal;
}

.job-details__strong {
  font-size: 24px;
}

@media (max-width: 1279px) {
  .job-details {
    margin: 32px auto 12px;
  }

  .job-details__container,
  .job-details__container:nth-child(2n) {
    width: 100%;
    display: block;
    text-align: center;
  }

  .job-details__container + .job-details__container {
    margin-top: 16px;
  }

  .job-details__emphasized {
    display: block;
  }
}

@media (max-width: 719px) {
  .job-details__emphasized {
    font-size: 22px;
  }

  .job-details__strong {
    font-size: 18px;
  }
}
.thank-note {
  display: none;
  padding-bottom: 32px;
  text-align: center;
}

.hr-modal {
  display: none;
  position: fixed;
  z-index: 40002; /* because of the cookies .message box */
  min-height: 100%;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.9);
}

.hr-modal [class] {
  overflow: visible;
}

.hr-modal--visible {
  display: block;
}

.hr-modal--thank-note .thank-note {
  display: block;
}

.hr-modal--thank-note .form {
  display: none;
}

.hr-modal .icon-close {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #e09531;
  font-size: 0;
}

.hr-modal .icon-close:before {
  font-size: 25px;
  transition: color .3s ease;
}

.hr-modal .icon-close:hover {
  color: #000;
  text-decoration: none;
}
/* 
.hr-modal .icon-close {
  position: absolute;
  right: -30px;
  top: -2px;
  color: #fff;
  font-size: 0;
}

.hr-modal .icon-close:before {
  font-size: 25px;
  transition: color .3s ease;
}

.hr-modal .icon-close:hover {
  color: #e09531;
  text-decoration: none;
}

@media (max-height: 600px) {
  .hr-modal .icon-close {
    top: 4px;
    right: 8px;
    color: #e09531;
  }

  .hr-modal .icon-close:hover {
    color: #000;
  }
} */

/* .hr-modal__content-box {
  padding: 32px 16px;
}
 */
.hr-modal__middle-wrapper {
  position: absolute;
  width: 416px;
  max-width: 100%;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  height: 100%;
  overflow: hidden;
  text-align: left;
}


.hr-modal .hr-modal__middle-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: auto;
  max-height: 100%;
  padding: 32px 16px 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  transform: translateY(-50%);
  border-radius: 3px;
}

.hr-modal .form {
  overflow-y: auto;

  margin-top: 0;
}

@media (max-width: 719px) {
  .hr-modal__middle-content {
    top: 8px;
    transform: none;
    left: 8px;
    right: 8px;
    max-height: calc(100% - 16px);
  }
}


@media (max-width: 479px) {
  .hr-modal__middle-wrapper {
    padding-left: 70px;
    padding-right: 70px;
  }
}

@media (min-width: 480px) and (max-width: 620px) {
  .hr-modal__middle-wrapper {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* .career-menu {
  z-index: 1000;
  position: fixed;
  top: 107px;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 70px;
  padding-bottom: 142px;
  width: 960px;
  background-color: #fff;
}
 */
.career-menu {
  z-index: 1000;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 70px;
  width: 930px;
  max-width: 100%;
  background-color: #fff;
}


.career-menu .slash {
  display: block;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 130px;
}

@media (max-width: 1279px) {
  .career-menu {
/*     position: relative;
    top: auto !important;
    width: auto;
    max-width: 100%; */
                          /* padding: 32px 0 148px; */
    padding: 32px 0 0;
  }

/*   .career-info {
    top: 390px !important;
  }
 */
  .career-menu .slash {
    padding: 16px 0 32px;
    /* font-size: 32px; */
    /* max-width: 100%; */
  }

}

@media (max-width: 719px) {
  main {
    overflow: hidden;
    background-color: red;
    width: 320px;
  }
  .career-menu {
    overflow: hidden;
    position: relative;
    top: auto;
    left: auto ;
    right: auto ;
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0;
    height: auto;
    transform: none;
  }

  .career-menu .career-info__detail {
    display: none;
  }

  .career-menu .slash {
    padding-bottom: 16px;
    font-size: 32px;
    max-width: 100%;
  }

  .career-info__item {
    height: auto;
  }
}

.career-tabs {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 48px;
  text-align: center;
}

.career-tabs__item {
  display: inline-block;
  width: 25%;
}

.career-tabs__link {
  font-size: 15px;
  font-weight: 400;
  color: #999;
  transition: all .3s ease;
  white-space: nowrap;
}

.career-tabs__link:hover {
  color: #000;
  text-decoration: none;
}

.career-tabs__link--active {
  font-weight: 800;
  color: #000;
}

@media (max-width: 719px) {
  .career-tabs {
    margin-bottom: 32px;
  }

  .career-tabs__item {
    display: block;
    width: 100%;
  }
  
  .career-tabs__item + .career-tabs__item {
    margin-top: 16px;
  }
}

.career-info [class] {
  overflow: visible; 
  /* Getting rid of base.css overflow hiddden added to elements with an class */
}

.career-info {
  position: relative;
  top: 0;
  width: 550px;
  max-width: 100%;
  margin: 0 auto 64px;
}
.hr-content-section--career-page {
  clear: both;
  margin-top: 0;
  padding-bottom: 320px;
}
.career-info .hr-content-section .slash {
  padding-top: 45px;
  margin-bottom: 0.25em;
}
@media (max-width: 1279px) {
  .career-info {
    margin-bottom: 48px;
  }
  .hr-content-section--career-page {
    padding: 48px 120px 220px;
  }
  .hr-content-section--career-page .plain-paragraph {
    margin-top: 15px;
  }
  .hr-content-section--career-page .slash {
    padding-top: 0;
    font-size: 32px;
  }
}
@media (max-width: 719px) {
  .career-info {
    top: auto !important;
    left: auto;
    transform: none;
    margin-bottom: 0;
    /* padding-bottom: 32px; */
  }
  
  .hr-content-section--career-page {
    top: auto !important;
    padding: 48px 32px;
  }
}

.career-info__details {
  overflow: initial;
  display: none;
  z-index: 20000;
  position: fixed;
  top: 116px;
  left: 50%;
  transform: translateX(-50%);
}

.career-info__job-title {
  overflow: initial;
  font-size: 24px;
  margin-bottom: 8px;
  color: #000;
  font-weight: 800;
}

.career-info__money-info {
  margin: 0;
  font-size: 24px;
  color: #d97d34;
}


@media (max-width: 719px) {
  .career-info__details {
    display: block;
    position: relative;
    top: auto !important;
    margin-top: 32px;
  }
}

.career-info__section:not(:first-child) .career-info__item:first-of-type .hexagons__inner-icon:before {
  content: '\e624';
}

.career-info__section:not(:first-child) .career-info__item:first-of-type .career-info__description {
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
}

/* .career-info__section--active .career-info__details {
  display: block;
} */
.career-info__detail {
  display: none;
  width: 100%;
  margin: 16px auto 32px;
  text-align: center;
}
@media (max-width: 719px) {
  .career-info__detail {
    margin-top: 32px;
  }
}
.career-info__detail--active {
  display: block;
}
.career-info__list {
  text-align: center;
}

.career-info__item {
  display: inline-block;
  width: 100%;
  text-align: left;
  height: 195px;
  margin-bottom: 32px !important;
}

.career-info__content,
.career-info__text-container,
.career-info__hexagon-container,
.career-info__item .hexagons__element {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.career-info__item .hexagons__element {
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.career-info__item .hexagons__content--hovered,
.career-info__item .hexagons__element:hover .hexagons__content--primary {
  display: block;
}

.career-info__content {
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  perspective: 100px;
  perspective-origin: 50% 50%;
}

.career-info__hexagon-container {
  transform-style: preserve-3d;
}
.career-info__text-container {
  position: absolute;
  top: 50%;
  left: 200px;
  width: 300px;
  font-size: 16px;
  transform: translateY(-50%);
  transform-origin: 0 0;
  transform-style: preserve-3d;
  perspective: 100px;
  perspective-origin: 30% 50%;
}

.career-info__description {
  position: relative;
  top: 50%;
  right: 0;
  left: 0;
  font-size: 16px;
  /* transform: translateY(-50%); */
}

@media (max-width: 719px) {
  .career-info__item {
    margin-top: 32px;
    height: auto;
  }
  .career-info__text-container {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: calc(100% - 152px);
    padding: 0 16px;
  }

  .career-info .hexagons__element {
    width: 120px;
    margin-left: 16px;
  }

  .career-info .hexagons__inner-icon {
    top: 65px;
  }
}
/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  position: relative;
  display: inline-block;
  width: 60%;
  vertical-align: top;
  min-height: 150px;
  border: 1px dashed #f85a5a;
  background: white;
  padding: 20px 20px;
  transition: all .3s ease;
  cursor: pointer;
}

.dropzone__progress-bar {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  display: inline-block;
  height: 10px;
  margin-top: 8px;
  background-color: #ec8332;
}

@media (max-width: 1270px) {
  .dropzone {
    min-height: 100px;
    padding: 8px;
  }

  .dropzone .dz-default.dz-message {
    margin-top: 0;
    margin-bottom: 32px;
  }
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
  background-color: #fee;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0;
}

.dropzone .dz-message:before {
  content: "\e611";
  display: block;
  font-family: 'iconvault';
  color: #999;
  font-size: 80px;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  min-height: 30px;
}

.dropzone .dz-preview:hover {
  z-index: 1000;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  text-align: left;
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: white;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  display: inline-block;
  width: 90%;
}

.dropzone .dz-preview .dz-remove {
  position: absolute;
  z-index: 100;
  right: 4px;
  top: 50%;
  margin-top: -4px;
  transform: translateY(-50%);
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
  font-size: 0;
}
.dropzone .dz-preview .dz-remove:before {
  content: '×';
  position: relative;
  top: 2px;
  font-size: 20px;
  margin-top: 2px;
}
/* @media (max-width: 1270px) {
  .dropzone .dz-preview .dz-remove {
    position: static;
    float: right;
  }
} */

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: relative;
  display: block;
  top: 0;
  left: 0;
  opacity: 1;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 4px;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
  text-align: left;
}

.dropzone .dz-preview .dz-details .dz-size {
  display: none;
  margin-bottom: 1em;
  font-size: 16px;
  float: right;
}

.dropzone .dz-preview .dz-details .dz-filename {
  display: inline-block;
  width: 85%;
  max-width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: none;
  z-index: 10;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white;
}

.dropzone .dz-preview .dz-error-message:after {
  content: '';
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

.dz-success-mark,
.dz-error-message,
.dz-progress {
  display: none;
}

.dropzone--overlay {
  pointer-events: none;
}

.dropzone--overlay:before {
  content:  '';
  display: inline-block;
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.06);
}