/**
 * CONTENTS
 *
 * SETTINGS
 * Global...............Globally-available variables and config.
 *
 * TOOLS
 * Mixins...............Useful mixins.
 *
 * GENERIC
 * Normalize.css........A level playing field.
 * Box-sizing...........Better default `box-sizing`.
 *
 * BASE
 * Headings.............H1–H6 styles.
 * Links
 * Lists
 * Tables
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 * Spacing
 *
 * COMPONENTS
 * Page-head............The main page header.
 * Navigation
 * Cards
 * Site
 * Page-foot............The main page footer.
 * Buttons..............Button elements.
 * Forms
 *
 * TRUMPS
 * Text.................Text helpers.
 * Utilities
 */





/* #SETTINGS */





/*------------------------------------*\
  #GLOBAL
\*------------------------------------*/

:root {

  --primary-colour: #222222; /* rgb(34, 34, 34) */
  --dark-grey: #aaaaaa; /* rgb(170, 170, 170) */
  --extra-light-grey: #f2f2f2;
  --medium-grey: #cccccc; /* rgb(204, 204, 204) */
  --light-grey: #eeeeee; /* rgb(238, 238, 238) */
  --white: #ffffff; /* rgb(255, 255, 255) */


  --container-width: 1140px;
  --gutter-width: calc(var(--container-width) * 0.04);


  --line-height: 2.4rem;

}


@media screen and (max-width: 1231px) {

  :root {

    --container-width: 93.75vw;
    --gutter-width: calc(var(--container-width) * 0.04);

  }

}


@media screen and (max-width: 768px) {

  :root {

    --gutter-width: calc(var(--container-width) * 0.03125);

  }

}


body {
  color: var(--primary-colour);
  font-family: "Roboto", sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.5;
}


p {
  font-size: inherit;
  margin: 0;
}


ul {
  margin: 0;
}


img {
  margin-bottom: 0;
}


::-moz-selection {
  background: var(--primary-colour);
  color: var(--dark-grey);
}

::selection {
  background: var(--primary-colour);
  color: var(--dark-grey);
}





/* #BASE */





/*------------------------------------*\
  #HEADINGS
\*------------------------------------*/

h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: normal;
  margin-bottom: 0;
}

h1,
h2 {
  font-family: "Open Sans", sans-serif;
}


h3,
h4 {
  font-family: "Roboto", sans-serif;
}


h1 {
  font-size: 2.5rem;
  letter-spacing: 0.075em;
  line-height: var(--line-height);
}


h2 {
  font-size: 2.0rem;
  letter-spacing: 0.100em;
  line-height: var(--line-height);
}


h3 {
  font-size: 1.6rem;
  line-height: var(--line-height);
}


h4 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: var(--line-height);
}





/*------------------------------------*\
  #LINKS
\*------------------------------------*/

a,
a:hover,
a:active,
a:focus {
  text-decoration: none;
}

a,
a:focus {
  color: var(--dark-grey);
}

a {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

a:hover,
a:active {
  color: var(--primary-colour);
}

a:focus {
  outline: 0;
}





/*------------------------------------*\
  #LISTS
\*------------------------------------*/

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 0;
  font-size: inherit;
}


ul {
  list-style: none outside;
}


li {
  margin-bottom: 0;
}


.list-item-en-dash::before {
  content: "– ";
}





/*------------------------------------*\
  #TABLES
\*------------------------------------*/

.table th,
.table td {
  padding: 0;
  vertical-align: top;
}





/* #GENERIC */





/*------------------------------------*\
  #BOX-SIZING
\*------------------------------------*/

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





/* #OBJECTS */





/*------------------------------------*\
  #WRAPPERS
\*------------------------------------*/

.container {
  max-width: none;
  width: var(--container-width);
}


.row {
  margin-bottom: 0;
  margin-top: 0;
}


.col-1 {
  width: 4.666666666666667%;
}

.col-2 {
  width: 13.333333333333333%;
}

.col-3 {
  width: 22%;
}

.col-4 {
  width: 30.66666666666667%;
}

.col-5 {
  width: 39.33333333333333%;
}

.col-6 {
  width: 48%;
}

.col-7 {
  width: 56.666666666666667%;
}

.col-8 {
  width: 65.33333333333333%;
}

.col-9 {
  width: 74%;
}

.col-10 {
  width: 82.66666666666667%;
}

.col-11 {
  width: 91.33333333333333%;
}

.col-12 {
  width: 100%;
}


@media screen and (max-width: 768px) {

  .col, [class^='col-'], [class*=" col-"] {
    margin: 0;
  }


  [class^='col-sm'], [class*=" col-sm"] {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    margin-left: 0.03333333333333%;
  }


  .col-sm-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 17.33333333333333%;
  }


  .col-sm-right {
    width: 79.33333333333333%;
  }

}





/*------------------------------------*\
  #SPACING
\*------------------------------------*/

.spacing-bottom-1 {
  margin-bottom: var(--line-height);
}

.spacing-bottom-2 {
  margin-bottom: calc(var(--line-height) * 2);
}

.spacing-bottom-3 {
  margin-bottom: calc(var(--line-height) * 3);
}

.spacing-bottom-4 {
  margin-bottom: calc(var(--line-height) * 4);
}

.spacing-bottom-5 {
  margin-bottom: calc(var(--line-height) * 5);
}

.spacing-bottom-6 {
  margin-bottom: calc(var(--line-height) * 6);
}


.spacing-top-1 {
  margin-top: var(--line-height);
}

.spacing-top-2 {
  margin-top: calc(var(--line-height) * 2);
}

.spacing-top-3 {
  margin-top: calc(var(--line-height) * 3);
}

.spacing-top-4 {
  margin-top: calc(var(--line-height) * 4);
}

.spacing-top-5 {
  margin-top: calc(var(--line-height) * 5);
}

.spacing-top-6 {
  margin-top: calc(var(--line-height) * 6);
}


.padding-bottom-1 {
  padding-bottom: var(--line-height);
}

.padding-bottom-2 {
  padding-bottom: calc(var(--line-height) * 2);
}

.padding-bottom-3 {
  padding-bottom: calc(var(--line-height) * 3);
}

.padding-bottom-4 {
  padding-bottom: calc(var(--line-height) * 4);
}

.padding-bottom-5 {
  padding-bottom: calc(var(--line-height) * 5);
}

.padding-bottom-6 {
  padding-bottom: calc(var(--line-height) * 6);
}


.padding-top-1 {
  padding-top: var(--line-height);
}

.padding-top-2 {
  padding-top: calc(var(--line-height) * 2);
}

.padding-top-3 {
  padding-top: calc(var(--line-height) * 3);
}

.padding-top-4 {
  padding-top: calc(var(--line-height) * 4);
}

.padding-top-5 {
  padding-top: calc(var(--line-height) * 5);
}

.padding-top-6 {
  padding-top: calc(var(--line-height) * 6);
}





/* #COMPONENTS */





/*------------------------------------*\
  #PAGE-HEAD
\*------------------------------------*/

.header-primary {
  background: -o-linear-gradient(rgba(34, 34, 34, 0.75), transparent);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(34, 34, 34, 0.75)), to(transparent));
  background: linear-gradient(rgba(34, 34, 34, 0.75), transparent);
  height: calc(var(--gutter-width) + var(--line-height) * 4 + var(--line-height) * 4);
  left: 0;
  top: 0;
  z-index: 10004;
}

  .header-primary__bg {
    background: var(--white);
    display: none;
  }


.js-header-primary--active {
  height: calc(var(--gutter-width) + var(--line-height) * 4);
}

  .js-header-primary__bg--active {
    display: block;
  }


@media screen and (max-width: 768px) {

  .header-primary {
    height: calc(var(--line-height) * 3 + var(--line-height) * 3);
  }


  .js-header-primary--active {
    height: calc(var(--line-height) * 3);
  }

}





/*------------------------------------*\
  #NAVIGATION
\*------------------------------------*/

/* TODO: check hover, active, focus */

.nav {
  margin-top: var(--gutter-width);
  padding: 0;
}


.nav-btn {
  background: transparent;
  right: calc(var(--gutter-width) - 0.5rem);
  top: -0.1rem;
  z-index: 1;
}


.nav-secondary {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: var(--line-height);
  width: 100%;
}


.nav-logo,
.nav-item-primary {
  font-size: 3.125rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: var(--line-height);
  padding: 0 var(--gutter-width) 0 0;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  transition: color 0.5s;
  z-index: 1;
}


@media (max-width: 991px) {
  .nav-logo,
  .nav-item-primary {
    font-size: 2.8rem;
  }
}


.nav-logo:hover,
.nav-item-primary:hover,
.nav-item-secondary:hover,
.nav-item-secondary-lang a:hover {
  color: var(--white);
}


.nav-logo {
  color: var(--white);
  left: var(--gutter-width);
  top: 0;
}


.nav-item-secondary,
.nav-item-secondary-bar {
  padding: 0 calc(var(--gutter-width) * 0.5) 0 0;
}

.nav-item-secondary {
  letter-spacing: 0.120em;
}

.nav-item-secondary-bar {
  color: var(--dark-grey);
}


.nav-item-secondary-lang {
  padding-right: var(--gutter-width);
}


.nav-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

  .nav-menu__bg {
    background: var(--primary-colour);
    display: none;
    left: 0;
    opacity: 0.9;
    top: 0;
  }

  .nav-menu__social {
    bottom: var(--line-height);
    display: none;
    padding-left: var(--gutter-width);
  }

    .nav-menu__social a:hover,
    .nav-menu__social a:active,
    .nav-menu__social a:focus {
      color: var(--white);
    }


    .nav-menu__social li {
      margin-left: var(--gutter-width);
      margin-right: var(--gutter-width);
    }


/* hamburgers */

.hamburger,
.hamburger:hover {
  -webkit-transform: scale(0.65);
      -ms-transform: scale(0.65);
          transform: scale(0.65);
}

.hamburger {
  padding: 0;
}

.hamburger:hover {
  opacity: 1;
}


.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger--slider .hamburger-inner,
.hamburger--slider .hamburger-inner::before,
.hamburger--slider .hamburger-inner::after {
  -webkit-transition-property: background, -webkit-transform;
  transition-property: background, -webkit-transform;
  -o-transition-property: background, transform;
  transition-property: background, transform;
  transition-property: background, transform, -webkit-transform;
  -webkit-transition-duration: 0.5s;
       -o-transition-duration: 0.5s;
          transition-duration: 0.5s;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  background: var(--white);
  border-radius: 0;
}


.js-nav-item-primary--active,
.js-nav-item-secondary--active,
.js-nav-item-secondary--active:active,
.js-nav-item-secondary--active:focus {
  color: var(--white);
}


.js-nav-item-secondary--inactive:active,
.js-nav-item-secondary--inactive:focus {
  color: var(--dark-grey);
}


.js-nav-item-primary--inverse,
.js-nav-item-secondary-bar--inverse,
.js-nav-item-secondary-lang--inverse a {
  color: var(--white);
}

.js-nav-item-primary--inverse:hover,
.js-nav-item-primary--inverse:active,
.js-nav-item-primary--inverse:focus,
.js-nav-item-secondary-lang--inverse a:hover,
.js-nav-item-secondary-lang--inverse a:active,
.js-nav-item-secondary-lang--inverse a:focus {
  color: var(--dark-grey);
}


  .js-header-primary--active .nav-logo,
  .js-header-primary--active .nav-logo:hover,
  .js-header-primary--active .nav-item-secondary:hover,
  .js-header-primary--active .js-nav-item-secondary--active,
  .js-header-primary--active .js-nav-item-secondary--active:active,
  .js-header-primary--active .js-nav-item-secondary--active:focus {
    color: var(--primary-colour);
  }


  .js-header-primary--active .hamburger-inner,
  .js-header-primary--active .hamburger-inner::before,
  .js-header-primary--active .hamburger-inner::after {
    background: var(--primary-colour);
  }


  .js-header-primary--menu .nav-logo,
  .js-header-primary--menu .nav-logo:hover {
    color: var(--white);
  }


  .js-header-primary--menu .hamburger-inner,
  .js-header-primary--menu .hamburger-inner::before,
  .js-header-primary--menu .hamburger-inner::after {
    background: var(--white);
  }


@media screen and (max-width: 768px) {

  .nav {
    margin-top: var(--line-height);
  }


  .nav-secondary {
    bottom: var(--line-height);
    position: fixed;
    right: 0;
    width: auto;
  }


  .nav-logo,
  .nav-item-primary {
    font-size: 2.5rem; /* equals heading level 1 */
    margin-bottom: calc(var(--line-height) * 3);
  }

  .nav-item-primary {
    padding-right: 0;
  }

  .nav-item-primary:last-of-type {
    margin-bottom: 0;
  }


  .nav-item-secondary-lang,
  .nav-menu {
    opacity: 0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    visibility: hidden;
  }

  .nav-item-secondary-lang {
    font-weight: 700;
    letter-spacing: 0.100em;
  }

    .nav-item-secondary-lang a {
      font-size: 2.0rem; /* equals heading level 2 */
      line-height: var(--line-height);
    }


  .nav-menu {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
  }

    .nav-menu__bg {
      display: block;
    }


    .nav-menu__social {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }


  .js-nav-item-secondary-lang--active,
  .js-nav-menu--active {
    opacity: 1;
    visibility: visible;
  }


  .js-nav-menu__social--home a {
    color: var(--white);
  }

  .js-nav-menu__social--home a:hover,
  .js-nav-menu__social--home a:active,
  .js-nav-menu__social--home a:focus {
    color: var(--dark-grey);
  }

}


@media screen and (min-width: 769px) {

  .js-header-primary--active .js-nav-item-primary--active,
  .js-header-primary--active .nav-item-primary:hover,
  .js-header-primary--active .nav-item-secondary-lang a:hover {
    color: var(--primary-colour);
  }

  .js-nav-item-secondary-lang--home,
  .js-nav-item-secondary-lang--home li {
    font-size: 1.6rem;
    font-weight: 700;
    height: calc(var(--line-height) * 2);
    letter-spacing: 0.100em;
  }

  .js-nav-item-secondary-lang--home {
    bottom: 0;
    position: fixed;
  }

  /* TODO: rename */
  .js-nav-item-secondary-lang--home.active {
    bottom: calc(var(--line-height) * 4);
  }

}





/*------------------------------------*\
  #CARDS
\*------------------------------------*/

.cards {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 0;
  overflow: visible;
}


.card {
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-left: var(--gutter-width);
}

  .card__overlay {
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
    top: 0;
  }

  .card__overlay:hover,
  .card__overlay:active,
  .card__overlay:focus {
    background: var(--primary-colour);
    opacity: 0.9;
  }

  .card__overlay a {
    color: var(--white);
  }

      .card__overlay p {
        color: transparent;
        padding-left: calc(var(--gutter-width) * 0.5);
        padding-right: calc(var(--gutter-width) * 0.5);
      }

      .card__overlay p:first-child {
        margin-bottom: calc(var(--gutter-width) * 0.25);
      }

      .card__overlay:hover p,
      .card__overlay:active p,
      .card__overlay:focus p {
        color: var(--white);
    }

        .card__overlay p .icn {
          fill: transparent;
        }

        .card__overlay:hover p .icn,
        .card__overlay:active p .icn,
        .card__overlay:focus p .icn {
          fill: var(--white);
      }


.card-3 {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 30.66666666666667%;
          flex: 0 1 30.66666666666667%;
}

.card-3:nth-child(3n+1) {
  margin-left: 0;
}


.card-4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 22%;
          flex: 0 1 22%;
}

.card-4:nth-child(4n+1) {
  margin-left: 0;
}


@media (max-width: 768px) {

  .card {
    margin-left: 0;
  }


  .cards > .card-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 31.25%;
            flex: 0 1 31.25%;
    margin-left: var(--gutter-width);
  }

  .cards > .card-4:nth-child(4n+1) {
    margin-left: var(--gutter-width);
  }

  .cards > .card-4:nth-child(3n+1) {
    margin-left: 0;
  }

}


@media (max-width: 400px) {

  .cards > .card-4 {
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
    margin-left: 0;
  }

  .cards > .card-4:nth-child(4n+1) {
    margin-left: 0;
  }

}


@media screen and (min-width: 769px) {

  [class^='card-3__col-'] {
    margin-left: 13.04347826086956%;
  }

  .card-3__col-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    width: 15.21739130434783%;
  }

  .card-3__col-right {
    width: 71.73913043478261%;
  }

}





/*------------------------------------*\
  #SITE
\*------------------------------------*/





/* band module */

.band-module {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(var(--line-height) * 20);
}


.band-module-gallery {
  height: 100%;
  position: absolute;
  top: 0;
  width: 50%;
}


  .band-module-gallery__btns {
    z-index: 9998;
  }

    .band-module-gallery__btns .col {
      margin-left: 0;
    }

    .band-module-gallery__btn__icn {
      color: var(--white);
      top: 50%;
      -webkit-transform: translate(0, -50%);
          -ms-transform: translate(0, -50%);
              transform: translate(0, -50%);
    }


    .band-module-gallery__btn-previous__icn {
      left: calc(var(--gutter-width) * 0.5);
    }


    .band-module-gallery__btn-next__icn {
      right: calc(var(--gutter-width) * 0.5);
    }


.band-module-gallery-left {
  left: 0;
}


.band-module-gallery-right {
  right: 0;
}


@media screen and (max-width: 768px) {

  .band-module {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    display: block;
    height: auto;
  }

    .band-module-content h2 {
      padding-top: calc(var(--line-height) * 2);
    }


  .band-module-content {
    margin-bottom: calc(var(--line-height) * 3);
  }

  .band-module-content:last-of-type {
    margin-bottom: calc(var(--line-height) * 4);
  }


  .band-module-gallery {
    height: 100vw;
    position: relative;
    width: 100%;
  }

    .band-module-gallery__btns .col {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
    }


    .band-module-gallery__nav-item {
      margin-left: var(--gutter-width);
      margin-right: var(--gutter-width);
    }

}


.js-band-module-gallery__img--first {
  z-index: 1;
}


/* .js-band-module-gallery__img--active {
  animation: js-band-module-gallery__img-transition 0.5s;
}

@keyframes js-band-module-gallery__img-transition {
  from {opacity: 0;}
  to {opacity: 1;}
} */





/* bgs */

.bg-cover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* background attachement fixed doesn't work width background size cover */
.bg-cover--fixed {
  background-attachment: fixed;
}


.bg-extra-light-grey {
  background: var(--extra-light-grey);
}


.bg-light-grey {
  background: var(--light-grey);
}


.bg-primary-colour {
  background: var(--primary-colour);
}

  .bg-primary-colour a:hover,
  .bg-primary-colour a:active,
  .bg-primary-colour a:focus {
  color: var(--dark-grey);
  }


/* full page bgs on ios fix */
@media screen and (max-width: 1024px) {

  .bg-cover--fixed {
    background-attachment: scroll;
  }

}





/* client module */

.clients-module,
.slick-slide div {
  height: calc(var(--line-height) * 2);
}

.clients-module {
  padding-left: var(--gutter-width);
  padding-right: var(--gutter-width);
}

  .clients-module__btn,
  .clients-module__btn:focus {
    color: var(--dark-grey);
  }

  .clients-module__btn {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    z-index: 1;
  }

  .clients-module__btn:hover,
  .clients-module__btn:active {
    color: var(--primary-colour);
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }


  .clients-module__btn-previous {
    left: 0;
  }


  .clients-module__btn-next {
    right: 0;
  }


  .clients-module__logo-sm {
    height: var(--line-height);
  }


  .clients-module__logo-medium {
    height: calc(var(--line-height) * 1.5);
  }


  .clients-module__logo-lg {
    height: calc(var(--line-height) * 2);
  }


@media screen and (max-width: 768px) {

  .clients-module {
    padding-left: calc(var(--gutter-width) * 3);
    padding-right: calc(var(--gutter-width) * 3);
  }

    .clients-module__logo {
      margin-left: calc(var(--gutter-width) * 3);
      margin-right: calc(var(--gutter-width) * 3);
    }

}


@media screen and (max-width: 400px) {

  .clients-module__logo {
    margin-left: calc(var(--gutter-width) * 5);
    margin-right: calc(var(--gutter-width) * 5);
  }

}





/* content module */

@media screen and (min-width: 769px) {

  .content-module__col-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

}





/* cover load */

.cover-load {
  left: 0;
  top: 0;
  z-index: 10003;
}

  .cover-load__icn {
    -webkit-animation: cover-load__icn-transform 1s infinite linear;
            animation: cover-load__icn-transform 1s infinite linear;
  }

  @-webkit-keyframes cover-load__icn-transform {
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
  }

  @keyframes cover-load__icn-transform {
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
  }





/* cover module */

.cover-module-slideshow {
  height: 100vh;
}


.js-cover-module-slideshow__img--first {
  z-index: 1;
}

.js-cover-module-slideshow__img--active {
  -webkit-animation: js-cover-module-slideshow__img-transition 0.5s;
          animation: js-cover-module-slideshow__img-transition 0.5s;
}

@-webkit-keyframes js-cover-module-slideshow__img-transition {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes js-cover-module-slideshow__img-transition {
  from {opacity: 0;}
  to {opacity: 1;}
}





/* flipbook */
@media (max-width: 991px) {
  #flipbook {
    display: hidden
  }
}

.flipbook .hard {
  background-color: var(--white);
}





/* scroll btns */

.scroll-down-btn {
  bottom: var(--line-height);
  display: none;
  z-index: 10001;
}

  .scroll-down-btn a {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: calc(var(--line-height) * 3);
    width: 13.333333333333333%; /* equals col 2 */

  }

  .scroll-down-btn .icn,
  .scroll-up-btn .icn {
    fill: var(--dark-grey);
  }

  .scroll-down-btn:hover .icn,
  .scroll-down-btn:active .icn,
  .scroll-down-btn:focus .icn {
    fill: var(--white);
  }

  .scroll-up-btn:hover .icn,
  .scroll-up-btn:active .icn,
  .scroll-up-btn:focus .icn {
    fill: var(--primary-colour);
  }


@media screen and (max-width: 768px) {

  .scroll-down-btn {
    z-index: 10000;
  }

    .scroll-down-btn a {
      width: auto;
    }

}


.js-scroll-down-btn--active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}





/* divider */

.divider {
  height: var(--line-height);
}

  .divider__line {
    background: var(--primary-colour);
    height: calc(var(--line-height) * 0.125);
    width: 2.0rem;
  }





/* google maps */

.google-maps {
  height: 0;
  overflow: hidden;
  padding-bottom: 31.66666666666666%; /* This is the aspect ratio */
  position: relative;
}

  .google-maps iframe {
    height: 100% !important;
    left: 0;
    position: absolute;
    top: 0;
    width: 100% !important;
  }


@media screen and (max-width: 768px) {

  .google-maps {
    padding-bottom: 100%;
  }

}




/* icns */

.icn {
  fill: var(--primary-colour);
  height: 1.6rem;
  width: 1.6rem;
}


.icn-fa,
.icn-icomoon {
  font-size: 1.6rem !important;
}


.icn-inline {
  margin-right: calc(var(--gutter-width) * 0.25);
}


.icn--lg {
  height: calc(var(--line-height) * 2);
  width: calc(var(--line-height) * 2);
}


.icn--sm {
  height: calc(var(--line-height) * 1.5);
  width: calc(var(--line-height) * 1.5);
}


.icn-fa--lg,
.icn-icomoon--lg {
  font-size: var(--line-height) !important;
}


.icn-fa--extra-lg,
.icn-icomoon--extra-lg {
  font-size: calc(var(--line-height) * 1.5) !important;
}


.icn-fa--sm,
.icn-icomoon--sm {
  font-size: calc(var(--line-height) * 0.5) !important;
}

.icn-fa--extra-sm,
.icn-icomoon--extra-sm {
  font-size: calc(var(--line-height) * 0.25) !important;
}





/* project module */

.project-module__table-item {
  line-height: 3.2rem;
}

  .project-module__table-item td:last-of-type {
    padding-left: var(--gutter-width);
  }


.project-module__share-item td {
  padding-top: var(--line-height);
}

.project-module__share-item a {
  margin-right: calc(var(--gutter-width) * 0.5);
}


.project-module .row > :first-child {
  margin-left: 0;
}


.project-module__content  .col-3,
.project-module__content  .col-4,
.project-module__content  .col-6,
.project-module__content  .col-8,
.project-module__content  .col-9 {
  margin-left: var(--line-height);
}

.project-module__content  .col-3 {
  width: calc((100% - var(--line-height)) / 12 * 3);
}

.project-module__content  .col-4 {
  width: calc((100% - var(--line-height)) / 12 * 4);
}

.project-module__content  .col-6 {
  width: calc((100% - var(--line-height)) / 12 * 6);
}

.project-module__content  .col-8 {
  width: calc((100% - var(--line-height)) / 12 * 8);
}

.project-module__content  .col-9 {
  width: calc((100% - var(--line-height)) / 12 * 9);
}


.project-module__content [class^='col-'], .project-module__content [class*=" col-"] {
  margin-bottom: var(--line-height);
}


.project-module__img-caption {
  bottom: calc(var(--gutter-width) / 2 * (-1));
  left: 0;
  line-height: var(--gutter-width);
  position: absolute;
}


.project-module__img-placeholder {
  display: none;
}


@media screen and (max-width: 768px) {

  .project-module__content [class^='col-'], .project-module__content [class*=" col-"] {
    margin-left: 0;
  }


  .project-module__img-link-right {
    display: block;
  }


  .project-module__img-caption {
    line-height: var(--line-height);
    position: static;
  }


  .project-module__img-placeholder {
    display: block;
    visibility: hidden;
  }

}


#colorbox,
#cboxOverlay,
#cboxWrapper {
  z-index: 10002;
}


#cboxOverlay {
  background: var(--light-grey);
}


#cboxContent {
  background: transparent;
  margin-bottom: calc(var(--line-height) * 3);
  margin-top: calc(var(--gutter-width) + var(--line-height) * 2);
}


#cboxLoadedContent {
  background: transparent;
  border: 0;
}


#cboxClose,
#cboxPrevious,
#cboxNext,
#cboxClose:focus,
#cboxPrevious:focus,
#cboxNext:focus {
  color: var(--dark-grey);
}

#cboxClose,
#cboxPrevious,
#cboxNext {
  background: none;
  height: auto;
  text-indent: 0;
  width: auto;
}

#cboxClose,
#cboxNext {
  right: var(--gutter-width);
}

#cboxPrevious,
#cboxNext {
  margin-top: calc(var(--line-height) * (-1))
}

#cboxClose {
  position: fixed;
  top: calc(var(--gutter-width) - 0.5rem); /* optically aligned */
}

#cboxPrevious {
  left: var(--gutter-width);
}

#cboxClose:hover,
#cboxClose:active,
#cboxPrevious:hover,
#cboxPrevious:active,
#cboxNext:hover,
#cboxNext:active {
  color: var(--primary-colour);
}


@media screen and (max-width: 768px) {

  .project-module__table-item td:last-of-type {
    padding-left: calc(var(--gutter-width) * 3);
  }


  #cboxClose {
    top: var(--line-height);
  }

}



/* works */

.works-module {
  margin-top: calc(var(--gutter-width) + var(--line-height) * 5);
  min-height: calc(100vh - calc(var(--line-height) * 8));
}

  .works-module__card {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 23.5%;
            flex: 0 1 23.5%;
    margin-bottom: calc(var(--gutter-width) * 0.5);
    margin-left: calc(var(--gutter-width) * 0.5);
  }

  .works-module__card:nth-child(4n+1) {
    margin-left: calc(var(--gutter-width) * 0.5);
  }


.js-filter-item--nth {
  margin-left: 0 !important;
}


@media screen and (max-width: 768px) {

  .works-module {
    margin-top: calc(var(--line-height) * 3 + var(--gutter-width));
  }

    .works-module__card {
      margin-bottom: var(--gutter-width);
    }

    .works-module__card:nth-child(4n+1) {
      margin-left: var(--gutter-width);
    }

}





/* youtube */

.youtube iframe {
  max-width: 100%;
}





/*------------------------------------*\
  #PAGE-FOOT
\*------------------------------------*/
.cookie-consent {
  height: calc(var(--line-height) * 4);
  padding-bottom: var(--gutter-width);
  padding-top: var(--gutter-width);
}

.cookie-consent a {
  /* TODO: remove specificity */
  color: var(--dark-grey) !important;
  letter-spacing: 0.120em;
  margin-right: calc(var(--gutter-width) * 0.5);
}

.cookie-consent a:hover {
  color: var(--colour-primary) !important;
}

.cookie-consent a:last-child {
  margin-right: var(--gutter-width);
}

.cookie-consent .col-4 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.cookie-consent p {
  margin: 0 var(--gutter-width);
}

@media (max-width: 768px) {
  .cookie-consent {
    height: auto;
  }

  .cookie-consent a {
    font-size: 1.2rem;
  }

  .cookie-consent a,
  .cookie-consent a:last-child {
    margin-right: 0;
  }

  .cookie-consent .col-4 {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0 var(--gutter-width);
  }

  .cookie-consent p {
    font-size: 1.4rem;
    margin-bottom: var(--gutter-width);
  }
}

.footer-primary {
  bottom: 0;
  left: 0;
  z-index: 10002;
}

  .footer-primary a:hover,
  .footer-primary a:active,
  .footer-primary a:focus {
    color: var(--white);
  }

.footer-primary__social {
  height: calc(var(--line-height) * 2);
}

  .footer-primary__social li {
    margin-left: calc(var(--gutter-width) * 0.5);
  }

  .footer-primary__social li:first-of-type {
    margin-left: var(--gutter-width);
  }


.js-footer-primary--active a {
  color: var(--dark-grey);
}

.js-footer-primary--active a:hover,
.js-footer-primary--active a:active,
.js-footer-primary--active a:focus {
  color: var(--primary-colour);
}


.js-footer-primary--home a {
  color: var(--white);
}

.js-footer-primary--home a:hover,
.js-footer-primary--home a:active,
.js-footer-primary--home a:focus {
  color: var(--dark-grey);
}





/*------------------------------------*\
  #BUTTONS
\*------------------------------------*/

button,
.button,
[type=submit] {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: transparent;
  font-size: inherit;
  margin-bottom: 0;
  padding: 0;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

button:hover,
.button:active,
[type=submit]:focus,
button:hover,
.button:active,
[type=submit]:focus,
button:hover,
.button:active,
[type=submit]:focus {
  background: transparent;
  color: transparent;
  cursor: pointer;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

button:focus {
  outline: 0;
}





/* #TRUMPS */





/*------------------------------------*\
  #TEXT
\*------------------------------------*/

.text-bold {
  font-weight: 700;
}


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


@media screen and (max-width: 768px) {

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

}


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


@media screen and (max-width: 768px) {

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

}


.text-label {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
}


/* TODO: add text trackings */
.text-tracking-100 {
  letter-spacing: 0.100em;
}


.text-sm {
  font-size: 1.3rem;
  line-height: var(--line-height);
}


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





/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/

.absolute {
  position: absolute;
}

@media (max-width: 768px) {
  .center-sm {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.block {
  display: block;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.direction-horizontal {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: horizontal;
          flex-direction: horizontal;
}

.direction-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: vertical;
          flex-direction: vertical;
}

.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

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

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

.justify-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}


@media screen and (max-width: 1024px) {

  .hide-tablet-lg {
    display: none;
  }

}


.hide-desktop-lg {
  display: none;
}


@media screen and (max-width: 768px) {

  .hide-desktop-lg {
    display: block;
  }

}


.hide-all {
  display: none;
}


.inline {
  display: inline;
}


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


.link-inverse {
  color: var(--primary-colour);
}

.link-inverse:hover,
.link-inverse:active,
.link-inverse:focus {
  color: var(--dark-grey);
}


.nowrap {
  white-space: nowrap;
}


.relative {
  position: relative;
}


.vp-height {
  height: 100vh;
}


.wrap-reverse {
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
}