@charset "UTF-8";
/*------------------------------------*    #SETTINGS
\*------------------------------------*/
/*!
 * inuitcss, by @csswizardry
 *
 * github.com/inuitcss | inuitcss.com
 */
/*------------------------------------*   #FONTS
\*------------------------------------*/
/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.fonts.com
*/
/**
 * @license
 * MyFonts Webfont Build ID 3334772, 2017-01-23T09:31:25-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: TradeGothicLT-CondEighteen by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/trade-gothic/condensed-no-18-63882/
 * Copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted (c) 1989, 1992, 2003 Linotype Library GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype Library GmbH, and 
 * 
 * Webfont: TradeGothicLT-BoldCondTwenty by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/trade-gothic/bold-condensed-no-20-63882/
 * Copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted (c) 1989, 1992, 2003 Linotype Library GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype Library GmbH, and 
 * 
 * Webfont: TradeGothicLTPro by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/trade-gothic/pro-roman/
 * Copyright: Copyright © 2007 Linotype GmbH, www.linotype.com. All rights reserved. This font software may not be reproduced, modified, disclosed or transferred without the express written approval of Linotype GmbH. Trade Gothic is either a registered trademark
 * 
 * Webfont: TradeGothicLTPro-Bd2 by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/trade-gothic/pro-bold-2/
 * Copyright: Copyright © 2007 Linotype GmbH, www.linotype.com. All rights reserved. This font software may not be reproduced, modified, disclosed or transferred without the express written approval of Linotype GmbH. Trade Gothic is either a registered trademark
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3334772
 * Licensed pageviews: 250,000
 * 
 * © 2017 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/32e274");
@font-face {
  font-family: 'TradeGothicLT-CondEighteen';
  src: url("fonts/32E274_0_0.eot");
  src: url("fonts/32E274_0_0.eot?#iefix") format("embedded-opentype"), url("fonts/32E274_0_0.woff2") format("woff2"), url("fonts/32E274_0_0.woff") format("woff"), url("fonts/32E274_0_0.ttf") format("truetype"); }

@font-face {
  font-family: 'TradeGothicLT-BoldCondTwenty';
  src: url("fonts/32E274_1_0.eot");
  src: url("fonts/32E274_1_0.eot?#iefix") format("embedded-opentype"), url("fonts/32E274_1_0.woff2") format("woff2"), url("fonts/32E274_1_0.woff") format("woff"), url("fonts/32E274_1_0.ttf") format("truetype"); }

@font-face {
  font-family: 'TradeGothicLTPro';
  src: url("fonts/32E274_2_0.eot");
  src: url("fonts/32E274_2_0.eot?#iefix") format("embedded-opentype"), url("fonts/32E274_2_0.woff2") format("woff2"), url("fonts/32E274_2_0.woff") format("woff"), url("fonts/32E274_2_0.ttf") format("truetype"); }

@font-face {
  font-family: 'TradeGothicLTPro-Bd2';
  src: url("fonts/32E274_3_0.eot");
  src: url("fonts/32E274_3_0.eot?#iefix") format("embedded-opentype"), url("fonts/32E274_3_0.woff2") format("woff2"), url("fonts/32E274_3_0.woff") format("woff"), url("fonts/32E274_3_0.ttf") format("truetype"); }

/*------------------------------------*   #GLOBAL
\*------------------------------------*/
/*------------------------------------*    #SUSY - VARIABLES
\*------------------------------------*/
/*------------------------------------*    #TOOLS
\*------------------------------------*/
/*------------------------------------*		$MIXINS
\*------------------------------------*/
/* CSS Transition
	Usage: @include transition(width,0.3s,ease-out);
 */
/*------------------------------------*    #ALIASES
\*------------------------------------*/
/*------------------------------------*    #GENERIC
\*------------------------------------*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

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

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

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

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

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

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

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

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

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

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

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

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

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

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

td,
th {
  padding: 0; }

/*------------------------------------*    #RESET
\*------------------------------------*/
/**
 * As well as using normalize.css, it is often advantageous to remove all
 * margins from certain elements.
 */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
figure,
table, th, td, caption,
hr {
  margin: 0;
  padding: 0; }

/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
abbr[title],
dfn[title] {
  cursor: help; }

/**
 * Remove underlines from potentially troublesome elements.
 */
u,
ins {
  text-decoration: none; }

/**
 * Apply faux underlines to inserted text via `border-bottom`.
 */
ins {
  border-bottom: 1px solid; }

/*------------------------------------*    #BOX-SIZING
\*------------------------------------*/
/**
 * Set the global `box-sizing` state to `border-box`.
 *
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 * paulirish.com/2012/box-sizing-border-box-ftw
 */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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

/*------------------------------------*    #SHARED
\*------------------------------------*/
/**
 * Where `margin-bottom` is concerned,this value will be the same as the
 * base line-height. This allows us to keep a consistent vertical rhythm.
 * As per: csswizardry.com/2012/06/single-direction-margin-declarations
 */
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset, figure,
pre {
  margin-bottom: 21px;
  margin-bottom: 1.5rem; }

/**
 * Where `margin-left` is concerned we want to try and indent certain elements
 * by a consistent amount. Define that amount once,here.
 */
ul, ol, dd {
  margin-left: 42px;
  margin-left: 3rem; }

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

.block-inverted {
  background: #000000;
  color: #ffffff; }
  .block-inverted a {
    color: #ffffff; }

.porfolio-grid {
  position: relative;
  float: left;
  width: 100%;
  background: #000000; }

.porfolio-grid a {
  text-decoration: none;
  color: #ffffff; }
  .porfolio-grid a:hover {
    color: #ffffff; }

.width--forty {
  float: left;
  width: 100%;
  height: 100%; }
  @media screen and (min-width: 45em) {
    .width--forty {
      width: 40%; } }

.width--forty-two {
  float: left;
  width: 100%; }
  @media screen and (min-width: 45em) {
    .width--forty-two {
      width: 42%; } }

.width--fifty {
  float: left;
  overflow: hidden;
  width: 100%; }
  @media screen and (min-width: 45em) {
    .width--fifty {
      width: 50%; } }

.width--fifty-eight {
  float: left;
  width: 100%; }
  @media screen and (min-width: 45em) {
    .width--fifty-eight {
      width: 58%; } }

.width--sixty {
  float: left; }
  @media screen and (min-width: 45em) {
    .width--sixty {
      width: 60%; } }

.text-block {
  color: #ffffff;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 42px; }

.text-block-left {
  background: #4ea99e;
  width: 100%; }
  @media screen and (min-width: 45em) {
    .text-block-left {
      height: 55.5%;
      position: absolute;
      width: 40%;
      left: 0;
      text-align: left; } }

.text-block-right {
  background: #5e2a44;
  width: 100%; }
  @media screen and (min-width: 45em) {
    .text-block-right {
      height: 37.4%;
      position: absolute;
      width: 30%;
      right: 0;
      text-align: left;
      padding-left: 33px;
      padding-right: 33px; } }
  @media screen and (min-width: 64em) {
    .text-block-right {
      padding-left: 55px;
      padding-right: 55px; } }

 @media screen and (min-width: 45em) {
.border-left {
    border-left: solid 4px #ffffff;
    padding-left: 21px;
    margin-left: 11px; } }

/*------------------------------------*    Hero Blocks - Used on About / Work
\*------------------------------------*/
.hero-block {
  color: #ffffff;
  padding: 42px 21px;
  display: inline-block;
  float: left; }
  @media screen and (min-width: 45em) {
    .hero-block {
      padding: 84px;
      margin-top: -1px; } }

@media screen and (min-width: 45em) {
  .hero-block h2 {
    width: 25%;
    float: left;
    border-right: 4px solid;
    text-align: right;
    padding-bottom: 0;
    padding-right: 21px; } }

@media screen and (min-width: 45em) {
  .hero-text {
    width: 75%;
    float: left;
    padding-left: 21px; } }

.brands-block {
  margin-top: 21px; }

/*------------------------------------*    Base heading overides
\*------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  color: #000000; }

h1 {
  font-size: 35px;
  font-size: 2.5rem;
  line-height: 0.9;
  letter-spacing: -1px; }

h2 {
  font-size: 39px;
  font-size: 2.78571rem;
  line-height: 1.11;
  margin-bottom: 11px; }

h3 {
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.11;
  margin-bottom: 11px; }

h4 {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1.75; }

h5 {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1.75; }

h6 {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1.75; }

/**
 * Extra + Sizes
 */
.giga {
  font-size: 35px;
  font-size: 2.5rem;
  line-height: 0.9;
  letter-spacing: -1px; }

.mega {
  font-size: 30px;
  font-size: 2.14286rem;
  line-height: 0.9; }

.kilo {
  font-size: 35px;
  font-size: 2.5rem;
  line-height: 0.9;
  letter-spacing: -1px; }

.quote-small {
  font-family: TradeGothicLT-BoldCondTwenty;
  font-size: 30px;
  font-size: 2.14286rem;
  line-height: 1.1; }

    li.width--fifty.text-block.text-mid.text-block-right span.quote-small {
    font-family: TradeGothicLT-BoldCondTwenty;
    font-size: 18px;
    font-size: 1.7rem;
    font-weight:300;
    }


@media screen and (min-width: 45em) {
  h1 {
    font-size: 39px;
    font-size: 2.78571rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  h2 {
    font-size: 26px;
    font-size: 1.85714rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  h3 {
    font-size: 20px;
    font-size: 1.42857rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  h4 {
    font-size: 20px;
    font-size: 1.42857rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  h5 {
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  /**
   * Extra + Sizes
   */
  .giga {
    font-size: 90px;
    font-size: 6.42857rem;
    line-height: 0.9;
    letter-spacing: -3px; }
  .mega {
    font-size: 40px;
    font-size: 2.85714rem;
    line-height: 0.9; }
  .kilo {
    font-size: 30px;
    font-size: 2.14286rem;
    line-height: 1.1; }
  .quote-small {
    font-size: 15px;
    font-size: 1.07143rem;
    line-height: 1; } }

@media screen and (min-width: 64em) {
  h1 {
    font-size: 39px;
    font-size: 2.78571rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  h2 {
    font-size: 26px;
    font-size: 1.85714rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  h3 {
    font-size: 20px;
    font-size: 1.42857rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  h4 {
    font-size: 20px;
    font-size: 1.42857rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  h5 {
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.11;
    margin-bottom: 21px; }
  /**
   * Extra + Sizes
   */
  .giga {
    font-size: 90px;
    font-size: 6.42857rem;
    line-height: 0.9;
    letter-spacing: -3px; }
  .mega {
    font-size: 60px;
    font-size: 4.28571rem;
    line-height: 0.9; }
  .kilo {
    font-size: 40px;
    font-size: 2.85714rem;
    line-height: 1.1; }
  .quote-small {
    font-size: 20px;
    font-size: 1.42857rem;
    line-height: 1.11; } }

/*------------------------------------*    Images
\*------------------------------------*/
img {
  width: 100%;
  height: auto; }

/*------------------------------------*    Global elements
\*------------------------------------*/
body {
  font-size: 90%;
  font-family: TradeGothicLTPro;
  font-weight: normal;
  font-style: normal; }
  @media screen and (min-width: 45em) {
    body {
      font-size: 125%; } }

blockquote {
  font-style: italic; }
  blockquote:before {
    content: '"';
    font-size: 30px;
    margin-bottom: -15px;
    width: 100%;
    display: block; }
  blockquote:after {
    content: '"';
    font-size: 30px;
    position: absolute; }

h1, h2, h3, h4, h5, h6 {
  font-family: TradeGothicLT-BoldCondTwenty;
  font-weight: normal;
  font-style: normal; }

.CondEighteen {
  font-family: TradeGothicLT-CondEighteen;
  font-weight: normal;
  font-style: normal; }

.CondTwenty {
  font-family: TradeGothicLT-BoldCondTwenty;
  font-weight: normal;
  font-style: normal; }

.LTPro {
  font-family: TradeGothicLTPro;
  font-weight: normal;
  font-style: normal; }

.LTPro-Bd2 {
  font-family: TradeGothicLTPro-Bd2;
  font-weight: normal;
  font-style: normal; }

/*------------------------------------*    Text colours
\*------------------------------------*/
.text-black {
  color: #000000; }

.text-white {
  color: #ffffff; }

.text-blue {
  color: #000000; }

/*------------------------------------*    Text formatting
\*------------------------------------*/
.text-tight {
  padding: 0;
  margin-bottom: 0; }

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

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

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

.text-center--mobile {
  text-align: center; }
  @media screen and (min-width: 45em) {
    .text-center--mobile {
      text-align: left; } }

/*------------------------------------*    Title blocks
\*------------------------------------*/
.title-block--wrapper {
  padding: 42px 0;
  display: block; }

/*------------------------------------*  	Links
\*------------------------------------*/
a {
  text-decoration: underline;
  color: #000000;
  font-weight: 600;
  transition: all 1s ease; }
  a:hover, a:active, a:focus {
    text-decoration: underline; }

a:hover {
  color: #ff8000;
  text-decoration: none;
  transition: all 0.3s ease; }

.link__slice {
  float: right;
  text-transform: uppercase;
  text-decoration: none;
  font-family: TradeGothicLT-BoldCondTwenty;
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
  padding-right: 21px;
  text-decoration: none !important; }
  @media screen and (min-width: 45em) {
    .link__slice {
      font-size: 20px;
      font-size: 1.42857rem;
      line-height: 1.05; } }

.link__slice-arrow {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 0;
  fill: #000000; }

.block-inverted .link__slice-arrow {
  fill: #ffffff; }

.link__slice .link__slice-arrow {
  transition: all 0.5s ease; }

.link__slice:hover .link__slice-arrow {
  fill: #ff8000;
  transition: all 0.3s ease; }

/*------------------------------------*    Fade in
\*------------------------------------*/
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

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

/*------------------------------------*    #FORM-ELEMENTS
\*------------------------------------*/
/**
* Form elements.
*
*/
/*------------------------------------*    #NON-CONTROL-FORM-ELEMENTS
\*------------------------------------*/
fieldset {
  min-width: 0;
  /* Reset Chrome and Firefox behaviour which sets a 'min-width: min-content;' on fieldsets */
  margin: 0;
  padding: 0;
  border: none; }

legend {
  display: block;
  width: 100%;
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.5; }

label {
  display: inline-block;
  max-width: 100%;
  /* Force IE8 to wrap long content */
  margin-bottom: 5px; }

/*------------------------------------*    #CONTROL-FORM-ELEMENTS
\*------------------------------------*/
/**
* Better positions for radio and checkbox
*/
input[type="radio"],
input[type="checkbox"] {
  position: relative;
  bottom: 2px;
  line-height: normal;
  vertical-align: middle; }
  input[type="radio"] + label,
  input[type="checkbox"] + label {
    margin-left: 5px; }

/**
* Set the height of file controls to match text inputs
*/
input[type="file"] {
  display: block; }

/**
* Make range inputs behave like textual form controls
*/
input[type="range"] {
  display: block;
  width: 100%; }

/**
* Make multiple select elements height not fixed
*/
select[multiple],
select[size] {
  height: auto; }

/**
* Remove chevron image
*/
select[multiple] {
  background-image: none; }

/*------------------------------------*    #IMAGES
\*------------------------------------*/
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [2] */
  vertical-align: middle;
  /* [3] */ }

/**
 * 1. Google Maps breaks if `max-width: 100%` acts upon it; use their selector
 *    to remove the effects.
 * 2. If a `width` and/or `height` attribute have been explicitly defined, let’s
 *    not make the image fluid.
 */
.gm-style img,
img[width],
img[height] {
  /* [2] */
  max-width: none; }

/*------------------------------------*    #OBJECTS
\*------------------------------------*/
/*------------------------------------*    #BUTTONS
\*------------------------------------*/
/**
 * A simple button object.
 */
/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 * 6. Fixes odd inner spacing in IE7.
 * 7. Subtract the border size from the padding value so that buttons do not
 *    grow larger as we add borders.
 */
.btn, .comment-form input[type="submit"] {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  font: inherit;
  /* [3] */
  text-align: center;
  /* [4] */
  margin: 0;
  /* [4] */
  cursor: pointer;
  /* [5] */
  overflow: visible;
  /* [6] */
  padding: 10px 21px;
  /* [7] */
  background-color: #4a8ec2;
  border: 1px solid #4a8ec2; }
  .btn, .comment-form input[type="submit"], .btn:hover, .comment-form input[type="submit"]:hover, .btn:active, .comment-form input[type="submit"]:active, .btn:focus, .comment-form input[type="submit"]:focus {
    text-decoration: none;
    /* [4] */
    color: #fff; }

/**
 * Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
 */
.btn::-moz-focus-inner, .comment-form input[type="submit"]::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*------------------------------------*    #LIST-BARE
\*------------------------------------*/
/**
 * The list-bare object simply removes any indents and bullet points from lists.
 */
.list-bare, .primary-menu li, .menu-social-container ul,
.comment-list {
  margin: 0;
  padding: 0;
  list-style: none; }

/*------------------------------------*    #LIST-UI
\*------------------------------------*/
/**
 * The UI list object creates blocky list items with a keyline separator out of
 * a `ul` or `ol`.
 */
.list-ui,
.list-ui__item,
.list-ui > li {
  border: 0 solid #ccc; }

.list-ui {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top-width: 1px; }

.list-ui__item,
.list-ui > li {
  padding: 21px;
  border-bottom-width: 1px; }

/*------------------------------------*    #LIST-INLINE
\*------------------------------------*/
/**
 * The list-inline object simply displays a list of items in one line.
 */
.list-inline {
  margin: 0;
  padding: 0;
  list-style: none; }
  .list-inline > li {
    display: inline-block; }

.map-info-wrapper {
  width: 100%;
  top: -42px; }
  @media screen and (min-width: 45em) {
    .map-info-wrapper {
      position: absolute;
      z-index: 3;
      top: -21px; } }

.map-info-box {
  float: left;
  width: 100%;
  padding: 21px;
  margin-top: 21px; }
  @media screen and (min-width: 45em) {
    .map-info-box {
      padding: 21px 21px 0 21px;
      width: auto; } }

#map {
  height: 300px;
  width: 100%;
  position: relative; }
  @media screen and (min-width: 45em) {
    #map {
      height: 400px;
      margin-top: 42px; } }
  @media screen and (min-width: 64em) {
    #map {
      height: 600px; } }

/*
 * jQuery FlexSlider v2.7.2
 * https://www.woocommerce.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 *
 */
/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/
@font-face {
  font-family: 'flexslider-icon';
  src: url('fonts/flexslider-icon.eot');
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
  width: 100%;
  display: block;
}
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  margin: 0 0 60px;
  background: #fff;
  border: 4px solid #fff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}
.flexslider .slides {
  zoom: 1;
}
.flexslider .slides img {
  height: auto;
  -moz-user-select: none;
}
.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport {
  max-height: 300px;
}
@-moz-document url-prefix() {
  .loading .flex-viewport {
    max-height: none;
  }
}
.carousel li {
  margin-right: 5px;
}
.flex-direction-nav {
  *height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}
.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}
.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1;
}
.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}
.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}
.flex-pauseplay a:hover {
  opacity: 1;
}
.flex-pauseplay a.flex-play:before {
  content: '\f003';
}
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}
.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}
.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.flex-control-thumbs img:hover {
  opacity: 1;
}
.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}
/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}

/*------------------------------------*    #COMPONENTS
\*------------------------------------*/
/*------------------------------------*    Buttons
\*------------------------------------*/
.button-solid {
  padding: 11px;
  margin: 0;
  width: 175px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.8;
  border-radius: 5px; }

.button-sidebyside {
  margin: 0 11px; }

.button-solid:hover {
  background: #000000;
  transition: background-color 0.5s ease; }

.button-solid-gray {
  background: #707070;
  color: #ffffff;
  transition: background-color 0.5s ease; }

.button-solid-white {
  background: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transition: background-color 0.5s ease; }

.button-solid-brand {
  background: #000000;
  color: #ffffff;
  transition: background-color 0.5s ease;
  opacity: 1; }
  .button-solid-brand:hover {
    background: #707070;
    transition: background-color 0.5s ease; }

.button-inline {
  margin: 11px; }

/*------------------------------------*    Equib brand
\*------------------------------------*/
.brand {
  position: relative;
  width: 50%;
  float: left;
  z-index: 3;
  height: 60px; }
  @media screen and (min-width: 45em) {
    .brand {
      width: 25%;
      float: left; } }

.brand svg {
  fill: #000000;
  transition: fill 0.5s ease;
  left: 0; }

.brand-light svg {
  fill: #ffffff;
  transition: fill 0.5s ease; }
  @media screen and (min-width: 45em) {
    .brand-light svg {
      fill: #000000; } }

.brand svg {
  width: auto;
  position: absolute;
  left: 0;
  height: 45px; }
  @media screen and (min-width: 45em) {
    .brand svg {
      height: 60px; } }

.comment-list ol {
  list-style: none; }

/*------------------------------------*    Contact form 7
\*------------------------------------*/
@media screen and (min-width: 45em) {
  .wpcf7-form {
    width: 75%;
    float: left; } }

.wpcf7-form p {
  margin: 0 0 11px 0;
  padding: 0; }

.wpcf7-form label {
  width: 100%;
  margin: 0;
  padding: 0; }

.wpcf7-form label br {
  display: none; }

.wpcf7-form input,
.wpcf7-form textarea {
  border: 1px solid #000000;
  padding: 11px;
  color: #000000;
  width: 100%; }

input.wpcf7-submit {
  background: #000000;
  text-transform: uppercase;
  border: 0;
  color: #ffffff;
  margin: 0;
  padding: 11px;
  width: 100%;
  float: left; }

.menu-primary-navigation-container {
  padding: 0;
  margin: 0; }

@media screen and (min-width: 64em) {
  .nav-wrapper {
    float: right;
    margin-top: 12px;
    height: 34px;
    width: 75%;
    float: left; } }

#primary-menu {
  padding: 0;
  margin: 0; }

.primary-menu {
  width: 100%;
  height: 100%;
  right: -100%;
  top: 0;
  padding-top: 200px;
  background-color: #000000;
  z-index: 2;
  overflow: hidden;
  transition: right 0.5s ease;
  font-family: TradeGothicLT-BoldCondTwenty;
  position: fixed; }
  @media screen and (min-width: 64em) {
    .primary-menu {
      padding-top: 0;
      background-color: transparent;
      position: relative;
      float: right;
      right: 0;
      text-align: right;
      display: block;
      width: 490px;
      opacity: 0;
      transition: opacity 1s ease; } }

.menu-show {
  width: 100%;
  right: 0;
  transition: right 0.5s ease; }
  @media screen and (min-width: 64em) {
    .menu-show {
      width: auto;
      opacity: 1;
      transition: opacity 1s ease;
      width: 490px; } }

.primary-menu li {
  display: block;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  font-size: 34px;
  font-size: 2.42857rem;
  line-height: 1.5; }
  @media screen and (min-width: 64em) {
    .primary-menu li {
      font-size: 24px;
      font-size: 1.71429rem;
      line-height: 1.6;
      margin: 0 42px 0 0;
      display: inline; } }

.primary-menu li a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease; }
  @media screen and (min-width: 64em) {
    .primary-menu li a {
      color: #000000;
      transition: all 1s ease; } }

.primary-menu li a:hover {
  color: #ff8000; }
  @media screen and (min-width: 64em) {
    .primary-menu li a:hover {
      color: #ff8000;
      transition: all 0.5s ease; } }

.nav-toggle {
  float: right;
  background-image: url(img/icon-menu.gif);
  background-repeat: no-repeat;
  background-position: center center;
  width: 25px;
  height: 35px;
  background-size: 100%;
  overflow: none;
  text-indent: -9999px;
  z-index: 4;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  transition: all 0.3s ease; }
  @media screen and (min-width: 64em) {
    .nav-toggle {
      width: 25px;
      height: 35px;
      position: relative;
      right: 0;
      top: 0; } }

.nav-toggled {
  background-image: url(img/icon-menu-light.gif);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  transition: all 0.3s ease; }
  @media screen and (min-width: 64em) {
    .nav-toggled {
      background-image: url(img/icon-menu.gif); } }

/*------------------------------------*    Site head
\*------------------------------------*/
.site-head {
  position: fixed;
  background: rgba(255, 255, 255, 0.98);
  top: 0;
  width: 100%;
  z-index: 9999;
  height: 65px;
  padding-top: 10px; }
  @media screen and (min-width: 45em) {
    .site-head {
      height: auto;
      padding-top: 0;
      height: 100px; } }

.site-head .content__slice {
  padding-top: 0; }
  @media screen and (min-width: 45em) {
    .site-head .content__slice {
      padding: 21px 42px; } }

/*------------------------------------*    Site foot
\*------------------------------------*/
.site-foot {
  margin-top: 84px;
  font-size: 85%; }

/*------------------------------------*   footer icons
\*------------------------------------*/
.menu-social-container li {
  display: inline-block;
  margin-right: 12.5px; }
  @media screen and (min-width: 45em) {
    .menu-social-container li {
      float: right;
      margin-left: 12.5px;
      margin-right: 0; } }

.menu-social-container li {
  text-indent: -9999px;
  opacity: 1;
  transition: opacity 0.3s ease; }

.menu-social-container li:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease; }

.icon-twitter a {
  background-image: url(img/icon-twitter.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  width: 40px;
  height: 40px;
  display: block;
  background-size: 100%; }
  @media screen and (min-width: 45em) {
    .icon-twitter a {
      width: 52px;
      height: 52px; } }

.icon-linkedin a {
  background-image: url(img/icon-linkedin.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  width: 40px;
  height: 40px;
  display: block;
  background-size: 90%; }
  @media screen and (min-width: 45em) {
    .icon-linkedin a {
      width: 52px;
      height: 52px; } }

.icon-dba a {
  background-image: url(img/icon-dba.gif);
  background-repeat: no-repeat;
  width: 130px;
  height: 42px;
  background-size: 100%;
  display: block; }
  @media screen and (min-width: 45em) {
    .icon-dba a {
      width: 150px;
      height: 52px; } }

/*------------------------------------*    Widgets
\*------------------------------------*/
.widget-title {
  font-size: 28px;
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 11px; }
  @media screen and (min-width: 45em) {
    .widget-title {
      margin-top: 0; } }

#text-6 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }

#text-3 h1,
#text-4 h1,
#nav_menu-2 h1,
#text-5 h1 {
  display: none; }

#text-3 {
  padding-bottom: 21px; }
  @media screen and (min-width: 45em) {
    #text-3 {
      width: 25%;
      float: left; } }
  @media screen and (min-width: 64em) {
    #text-3 {
      width: 43.75%;
      float: left; } }

#text-4 {
  padding-bottom: 21px; }
  @media screen and (min-width: 45em) {
    #text-4 {
      width: 18.75%;
      float: left;
      margin-left: 6.25%; } }
  @media screen and (min-width: 64em) {
    #text-4 {
      width: 18.75%;
      float: left;
      margin-left: 6.25%; } }

@media screen and (min-width: 45em) {
  #nav_menu-2 {
    width: 43.75%;
    float: left; } }

@media screen and (min-width: 64em) {
  #nav_menu-2 {
    width: 31.25%;
    float: left; } }

#text-5 {
  text-align: center;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  padding: 42px 0; }

/*------------------------------------*    #LAYOUTS
\*------------------------------------*/
/*------------------------------------*    Frontpage
\*------------------------------------*/
.position-relative {
  position: relative;
  overflow: hidden; }

.project-info {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  top: 0;
  left: 0;
  opacity: 0;
  padding-top: 30px;
  padding-right: 60px;
  padding-left: 42px;
  transition: opacity 1s ease;
  display: none; }
  @media screen and (min-width: 45em) {
    .project-info {
      display: block; } }

.project-info:hover {
  opacity: 1;
  transition: opacity 1s ease; }

.block-info {
  width: 100%;
  display: block;
  padding-bottom: 11px; }

/*------------------------------------*    About 
\*------------------------------------*/
.services {
  max-width: 800px;
  margin: auto; }

.service {
  padding-bottom: 21px; }
  @media screen and (min-width: 45em) {
    .service {
      width: 33.33333%;
      float: left;
      padding-bottom: 0; } }

.service img {
  padding: 0 84px 11px 84px;
  max-width: 225px; }
  @media screen and (min-width: 45em) {
    .service img {
      max-width: 350px; } }

.service h3 {
  padding-bottom: 0;
  margin-bottom: 2.5px; }

@media screen and (min-width: 45em) {
  .bio-block {
    width: 68%;
    float: left;
    margin-top: 82px; } }

.image-block {
  padding: 11px 0 21px 0; }
  @media screen and (min-width: 45em) {
    .image-block {
      width: 32%;
      float: right;
      padding: 0; } }

.content__slice--team-slider {
  padding-top: 63px !important;
  padding-bottom: 63px !important; }

/*------------------------------------*    Work
\*------------------------------------*/
.brands-block {
  margin-top: 84px; }

.list-bare--clients li {
  width: 50%;
  float: left;
  padding: 0 42px; }
  @media screen and (min-width: 45em) {
    .list-bare--clients li {
      width: 25%;
      float: left; } }

/*------------------------------------*    Work
\*------------------------------------*/
.quote-holder {
  width: 100%;
  text-align: center;
  padding: 63px 21px 63px 21px;
  float: left; }

.quote {
  font-family: TradeGothicLT-BoldCondTwenty;
  max-width: 650px;
  display: block;
  margin: auto;
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.1; }
  .quote:before, .quote:after {
    content: '"'; }
  @media screen and (min-width: 45em) {
    .quote {
      font-size: 30px;
      font-size: 2.14286rem;
      line-height: 1.1; } }

.author {
  display: inline-block;
  width: 100%;
  padding-top: 5px; }

/* This is the dash before the author of each work page quote */
  /* .author:before {
    content: '- '; } */

body#tinymce {
  margin: 12px !important; }

/*------------------------------------*    Columns
\*------------------------------------*/
@media screen and (min-width: 45em) {
  .span-one {
    width: 25%;
    float: left; } }

@media screen and (min-width: 45em) {
  .span-two {
    width: 50%;
    float: left; } }

@media screen and (min-width: 45em) {
  .span-three {
    width: 70%;
    float: left; } }

@media screen and (min-width: 45em) {
  .span-three-quarter {
    width: 80%;
    float: left; } }

@media screen and (min-width: 45em) {
  .span-three-half {
    width: 85%;
    float: left; } }

@media screen and (min-width: 45em) {
  .span-four {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; } }

.v-align {
  display: flex;
  display: -webkit-flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

/*------------------------------------*    Wrappers
\*------------------------------------*/
.content__wrapper {
  max-width: 1101px;
  margin: auto; }

.content__slice {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto; }
  .content__slice:after {
    content: " ";
    display: block;
    clear: both; }
  @media screen and (min-width: 45em) {
    .content__slice {
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto; }
      .content__slice:after {
        content: " ";
        display: block;
        clear: both; } }

.content__slice {
  padding: 42px 11px; }
  @media screen and (min-width: 45em) {
    .content__slice {
      padding: 42px 42px; } }

.content__slice--flush {
  padding: 0; }

.page-wrapper {
  margin-top: 70px;
  animation-name: fadein;
  animation-duration: 4s; }
  @media screen and (min-width: 45em) {
    .page-wrapper {
      margin-top: 100px; } }

/*------------------------------------*    #TRUMPS
\*------------------------------------*/
/*------------------------------------*    #HEADINGS
\*------------------------------------*/
/**
 * Headings 1–6’s corresponding Greek-alphabet abstract classes for double-
 * stranded heading hierarchy: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
 *
 * Use these helper classes to cause other elements to adopt the styling of the
 * respective heading, e.g.:
 *
   <h2 class="alpha">Lorem ipsum</h2>
 *
 */
.alpha {
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.1; }

.beta {
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.2; }

.gamma {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.2; }

.delta {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.2; }

.epsilon {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1; }

.zeta {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1.75; }

@media screen and (min-width: 45em) {
  .alpha {
    font-size: 39px;
    font-size: 2.78571rem;
    line-height: 1.5; }
  .beta {
    font-size: 39px;
    font-size: 2.78571rem;
    line-height: 1.2; }
  .gamma {
    font-size: 26px;
    font-size: 1.85714rem;
    line-height: 1.2; }
  .delta {
    font-size: 20px;
    font-size: 1.42857rem;
    line-height: 1.2; } }

/*------------------------------------*    #SHOW-HIDE
\*------------------------------------*/
.hide {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

@media screen and (max-width: 44.9375em) {
  .hide-palm {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); } }

@media screen and (min-width: 45em) and (max-width: 63.9375em) {
  .hide-lap {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); } }

/* ipad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  .hide-pad {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); } }

@media screen and (min-width: 45em) {
  .hide-lap-and-up {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); } }

@media screen and (max-width: 63.9375em) {
  .hide-portable {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); } }

@media screen and (min-width: 64em) {
  .hide-desk {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); } }

.open {
  overflow: hidden; }

.light {
  display: block; }

.dark {
  display: none; }

.alignnone {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%; }

.aligncenter {
  display: block;
  margin: 11px auto; }

.alignleft {
  float: left; }

.alignright {
  float: right; }

.wp-caption-text {
  padding: 11px; }

.sr-only, .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

.sr-only-focusable:active, .screen-reader-text:active,
.sr-only-focusable:focus,
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto; }