@charset "UTF-8";
/*
Theme Name: Casa Mondé
Author: the WordPress team
Author URI: http://www.futago.com.au/
Description: Tasmania’s premier lighting specialist
Version: 1.0

*/
/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

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

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Definitions
   ========================================================================== */
/* ==========================================================================
   Template
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: "Libre Baskerville", serif;
}

body {
  font-family: "Work Sans", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 105px;
  padding: 0 20px;
  position: fixed;
  top: 0;
  width: calc(100% - 40px);
  z-index: 10000;
}

header:after {
  content: '';
  width: calc(100% - 290px);
  height: 100%;
  right: 0;
  top: 0;
  background-color: #fff;
  position: absolute;
  z-index: -1;
}

header:before {
  content: '';
  width: 20px;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  position: absolute;
  z-index: -1;
}

header .logo {
  background-color: #FC4237;
  transition: background-color 500ms;
}

header .logo.transparent {
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 500ms;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

header .mobile-menu-link {
  display: none;
}

header nav {
  background-color: white;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-family: "Poppins", sans-serif;
  font-size: 0.75em;
  font-weight: 300;
  position: relative;
}

header nav ul {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 25px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

header nav li {
  display: inline;
  line-height: 1;
  list-style-type: none;
  margin-left: 20px;
  position: relative;
  text-transform: lowercase;
}

header nav li.current_page_item a:before {
  width: 100%;
  content: '';
  height: 4px;
  position: absolute;
  left: 0;
  bottom: -4px;
  background-color: rgba(252, 66, 55, 0.5);
}

header nav li a {
  color: #414141;
  position: relative;
  text-decoration: none;
}

header nav li a:before {
  width: 100%;
  content: '';
  height: 0px;
  position: absolute;
  left: 0;
  bottom: -4px;
  background-color: rgba(127, 135, 146, 0.5);
  transition: height 200ms;
}

header nav li a:hover:before {
  height: 4px;
  transition: height 200ms;
}

header .social {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 65px;
  right: 20px;
}

header .social li {
  display: inline;
  list-style-type: none;
}

header .social li a {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #8e8e8e;
  border-radius: 50%;
  text-indent: -100000px;
  transition: background-color 200ms;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: 5px;
}

header .social li a:hover {
  background-color: #FC4237;
  transition: background-color 200ms;
}

header .social li a.fb {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%2214%22%20viewBox%3D%220%200%207%2014%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3Bopacity%3A0.9%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Efb%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M7%2C3H5.65C5.11%2C3%2C5%2C3.22%2C5%2C3.78V5H7L6.79%2C7H5v7H2V7H0V5H2V2.69C2%2C0.92%2C2.93%2C0%2C5%2C0H7V3Z%22%2F%3E%3C%2Fsvg%3E");
}

header .social li a.ig {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bopacity%3A0.9%3B%7D.cls-2%2C.cls-3%7Bfill%3A%23fff%3B%7D.cls-3%7Bopacity%3A0.6%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eig%3C%2Ftitle%3E%3Cg%20class%3D%22cls-1%22%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M26.73%2C6.56a3.31%2C3.31%2C0%2C1%2C1-6.15-1.68H16.93v5.57A2.59%2C2.59%2C0%2C0%2C0%2C19.52%2C13h7.85a2.56%2C2.56%2C0%2C0%2C0%2C2.56-2.56V4.88H26.25A3.28%2C3.28%2C0%2C0%2C1%2C26.73%2C6.56Z%22%20transform%3D%22translate%28-16.93%29%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M23.42%2C9.11a2.55%2C2.55%2C0%2C1%2C0-2.55-2.55A2.55%2C2.55%2C0%2C0%2C0%2C23.42%2C9.11Zm0-4.43a1.88%2C1.88%2C0%2C1%2C1-1.88%2C1.88A1.88%2C1.88%2C0%2C0%2C1%2C23.43%2C4.68Z%22%20transform%3D%22translate%28-16.93%29%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M27.37%2C0H20.72V2.71H20.18V0H19.63V2.71H19.09V0a2.57%2C2.57%2C0%2C0%2C0-.54.15V2.71H18V0.49a2.54%2C2.54%2C0%2C0%2C0-1.08%2C2.07V4.33h4a3.3%2C3.3%2C0%2C0%2C1%2C4.89%2C0h4.07V2.56A2.56%2C2.56%2C0%2C0%2C0%2C27.37%2C0Zm1.47%2C2.85a0.4%2C0.4%2C0%2C0%2C1-.4.4H27.08a0.4%2C0.4%2C0%2C0%2C1-.4-0.4V1.48a0.4%2C0.4%2C0%2C0%2C1%2C.4-0.4h1.36a0.4%2C0.4%2C0%2C0%2C1%2C.4.4V2.85Z%22%20transform%3D%22translate%28-16.93%29%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M29.93%2C10.44A2.56%2C2.56%2C0%2C0%2C1%2C27.37%2C13H19.52a2.59%2C2.59%2C0%2C0%2C1-2.59-2.56V4.88h3.65a3.31%2C3.31%2C0%2C1%2C0%2C5.67%2C0h3.67v5.57Z%22%20transform%3D%22translate%28-16.93%29%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M25.1%2C4.64A2.55%2C2.55%2C0%2C1%2C0%2C26%2C6.56%2C2.55%2C2.55%2C0%2C0%2C0%2C25.1%2C4.64Zm-1.67%2C3.8a1.88%2C1.88%2C0%2C1%2C1%2C1.88-1.88A1.88%2C1.88%2C0%2C0%2C1%2C23.43%2C8.44Z%22%20transform%3D%22translate%28-16.93%29%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M27.37%2C0H20.72V2.71H20.18V0H19.63V2.71H19.09V0a2.57%2C2.57%2C0%2C0%2C0-.54.15V2.71H18V0.49a2.54%2C2.54%2C0%2C0%2C0-1.08%2C2.07V4.33h4a3.3%2C3.3%2C0%2C0%2C1%2C4.89%2C0h4.07V2.56A2.56%2C2.56%2C0%2C0%2C0%2C27.37%2C0Zm1.47%2C2.85a0.4%2C0.4%2C0%2C0%2C1-.4.4H27.08a0.4%2C0.4%2C0%2C0%2C1-.4-0.4V1.48a0.4%2C0.4%2C0%2C0%2C1%2C.4-0.4h1.36a0.4%2C0.4%2C0%2C0%2C1%2C.4.4V2.85Z%22%20transform%3D%22translate%28-16.93%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.customize-support header {
  top: 32px;
}

article {
  background-color: #D9D9D9;
  margin: 105px 20px 20px;
  padding: 15px;
  color: #414141;
  z-index: 10;
}

article .top {
  background-color: #ECECEC;
  margin-bottom: 20px;
  padding: 10px 20px;
}

article .top h1 {
  font-size: 3.125em;
  margin: 0;
  position: relative;
}

article .top h1:after {
  height: 5px;
  width: 30px;
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  background-color: rgba(252, 66, 55, 0.5);
}

article .top p {
  font-size: 1.125em;
  font-family: "Libre Baskerville", serif;
}

article p, article ul, article ol, article table {
  font-size: 1.125em;
  line-height: 1.5em;
}

article strong, article b {
  font-weight: 500;
}

article a {
  color: #414141;
  transition: color 200ms;
}

article a:hover {
  color: #FC4237;
  transition: color 200ms;
}

footer {
  background-color: #7F8792;
  color: #ECECEC;
  margin: 0 20px 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5px 15px;
}

footer > div {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0 10px;
  width: 33%;
}

footer h2 {
  border-bottom: 1px solid #ECECEC;
}

footer a {
  color: #ECECEC;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

footer .social ul {
  padding: 0;
}

footer .social li {
  list-style-type: none;
}

footer .social a {
  position: relative;
  display: block;
  height: 30px;
  padding-left: 35px;
  line-height: 30px;
  margin-bottom: 10px;
}

footer .social a:before {
  position: absolute;
  top: 50%;
  left: 0;
  height: 30px;
  width: 30px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

footer .social .fb:before {
  content: url("img/fb.svg");
}

footer .social .ig:before {
  content: url("img/ig.svg");
}

@media (max-width: 800px) {
  header {
    height: 82px;
  }
  header:after {
    width: calc(100% - 244px);
  }
  header .logo {
    width: 223px;
    height: 81px;
  }
  header .logo img {
    height: 82px;
  }
  header .mobile-menu-link {
    position: fixed;
    display: block;
    width: 25px;
    height: 24px;
    top: 29px;
    right: 20px;
    z-index: 10;
  }
  header .mobile-menu-link svg {
    height: 24px;
    vertical-align: top;
  }
  header .mobile-menu-link svg line {
    opacity: 1.0;
    transition: all 200ms;
  }
  header .mobile-menu-link svg.close line:nth-child(4), header .mobile-menu-link svg.close line:nth-child(2) {
    opacity: 0.0;
    transition: opacity 200ms;
  }
  header .mobile-menu-link svg.close line:nth-child(3) {
    -webkit-transform: translate(-12px, 5px) rotate(-45deg);
        -ms-transform: translate(-12px, 5px) rotate(-45deg);
            transform: translate(-12px, 5px) rotate(-45deg);
  }
  header .mobile-menu-link svg.close line:nth-child(1) {
    -webkit-transform: translate(5px, 2px) rotate(45deg);
        -ms-transform: translate(5px, 2px) rotate(45deg);
            transform: translate(5px, 2px) rotate(45deg);
  }
  header nav {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 1.0625em;
    opacity: 0.0;
    transition: left 0s linear 500ms, opacity 500ms linear;
    left: -10000px;
  }
  header nav.active {
    opacity: 1.0;
    left: 0;
    transition: opacity 500ms;
  }
  header nav ul {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    right: auto;
  }
  header nav ul li {
    display: block;
    margin-bottom: 35px;
    margin-left: 0;
  }
  header .social {
    display: none;
  }
  article {
    margin-top: 82px;
  }
  article .top h1 {
    font-size: 2em;
  }
  article .top p {
    font-size: 0.875em;
  }
  article p, article ul {
    font-size: 1em;
  }
  article h2 {
    font-size: 1.25em;
  }
  footer {
    display: block;
  }
  footer > div {
    width: calc(100% - 20px);
    max-width: 400px;
  }
}

.content-page .top * {
  max-width: 1000px;
}

.content-page > p, .content-page > h2, .content-page > h3, .content-page > h4, .content-page > h5, .content-page > h6, .content-page > ul, .content-page > ol {
  max-width: 1000px;
}

article.home {
  height: calc(100vh - 155px);
  position: relative;
}

.customize-support article.home {
  height: calc(100vh - 187px);
}

article.home .info-background {
  width: calc(25% + 40px);
  max-width: calc(320px + 40px);
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(127, 135, 146, 0.6);
  mix-blend-mode: multiply;
  position: absolute;
  z-index: 99;
}

article.home .slide {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.0;
}

article.home .slide.active {
  z-index: 11;
}

article.home .slide.next {
  z-index: 10;
}

article.home .slide .info {
  position: absolute;
  background: transparent;
  top: 0;
  left: 0;
  width: 25%;
  max-width: 320px;
  z-index: 100;
  color: #fff;
  top: auto;
  bottom: 0;
  padding: 10px 20px 50px;
}

article.home .slide .info a {
  color: #fff;
}

article.home .slide .info a {
  background-color: #7F8792;
  border-radius: 8px;
  padding: 5px 10px;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: 0.10938em;
  text-decoration: none;
  margin-top: 15px;
  display: inline-block;
  transition: background-color 200ms;
}

article.home .slide .info a:hover {
  background-color: #4f545c;
  transition: background-color 200ms;
}

article.home .slide .info h2 {
  font-size: 2em;
  line-height: 1.125em;
}

article.home .slide .info .subtitle {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 5px 0;
}

article.home .slide .image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

article.home .slide .image img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

article.home .slide .image img.taller {
  height: auto;
  width: 100%;
}

article.home .slide .image img.wider {
  width: auto;
  height: 100%;
}

article.home .slide .image img.equal {
  width: 100%;
  height: 100%;
}

article.home .slide-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 12;
  padding: 0;
  margin: 0;
}

article.home .slide-controls li {
  display: inline;
  line-height: 16px;
}

article.home .slide-controls li a {
  width: 16px;
  height: 16px;
  display: inline-block;
  text-indent: -10000px;
  background-color: #fff;
  border-radius: 50%;
  transition: background-color 500ms;
}

article.home .slide-controls li a.active {
  background-color: #FC4237;
  transition: background-color 500ms;
}

@media (max-width: 800px) {
  article.home .slide .info-background {
    display: none;
  }
  article.home .slide .info {
    bottom: 0;
    width: calc(100% - 40px);
    max-width: 100%;
    font-size: 0.8em;
    padding-bottom: 10px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5);
  }
  article.home .slide .info h2 {
    margin: 0;
  }
  article.home .slide .info a {
    max-width: 250px;
    margin-top: 0;
  }
  article.home .slide-controls {
    top: 10px;
    bottom: auto;
  }
}

article.suppliers .overlay {
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 998;
  background-color: white;
  left: -10000px;
  opacity: 0.0;
  transition: left 0s linear 500ms, opacity 500ms linear;
}

article.suppliers .overlay.active {
  opacity: 0.7;
  left: 0;
  transition: opacity 500ms;
}

article.suppliers .supplier-grid {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

article.suppliers .supplier-grid .row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px;
}

article.suppliers .supplier-grid .supplier {
  background-color: #ECECEC;
  display: inline-block;
  vertical-align: top;
  width: calc(20% - 36px);
  margin-left: 20px;
  padding: 10px;
  position: relative;
}

article.suppliers .supplier-grid .supplier > a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
}

article.suppliers .supplier-grid .supplier:nth-child(5n+1) {
  margin-left: 0;
}

article.suppliers .supplier-grid .supplier .logo {
  background-color: #9D9FA2;
  border-radius: 50%;
  margin: 0 auto 10px;
  padding-bottom: calc(100% - 20px);
  position: relative;
  width: calc(100% - 20px);
  transition: background-color 300ms;
}

article.suppliers .supplier-grid .supplier .logo img {
  position: absolute;
  width: 80% !important;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

article.suppliers .supplier-grid .supplier .logo img.taller {
  height: auto;
  width: 100%;
}

article.suppliers .supplier-grid .supplier .logo img.wider {
  width: auto;
  height: 100%;
}

article.suppliers .supplier-grid .supplier .logo img.equal {
  width: 100%;
  height: 100%;
}

article.suppliers .supplier-grid .supplier:hover .logo, article.suppliers .supplier-grid .supplier.active .logo {
  background-color: #FC4237;
  transition: background-color 300ms;
}

article.suppliers .supplier-grid .supplier h2 {
  font-size: 1.125em;
  text-transform: uppercase;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  margin: 0;
}

article.suppliers .supplier-grid .supplier > p {
  margin: 0;
  font-size: 1em;
}

article.suppliers .supplier-grid .supplier .popup {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: -10000px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 550px;
  min-width: 400px;
  background-color: rgba(236, 236, 236, 0.9);
  transition: left 0s linear 500ms, opacity 500ms linear;
  opacity: 0.0;
  padding: 20px;
}

article.suppliers .supplier-grid .supplier .popup.active {
  opacity: 1.0;
  left: 50%;
  transition: opacity 500ms;
}

article.suppliers .supplier-grid .supplier .popup .close {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  text-indent: -10000px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23fa99a2%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Csymbol%20id%3D%22IRAME_CLOSE%22%20data-name%3D%22IRAME%20CLOSE%22%20viewBox%3D%220%200%2030.71%2030.71%22%3E%3Cline%20class%3D%22cls-1%22%20x1%3D%2230.35%22%20y1%3D%220.35%22%20x2%3D%220.35%22%20y2%3D%2230.35%22%2F%3E%3Cline%20class%3D%22cls-1%22%20x1%3D%220.35%22%20y1%3D%220.35%22%20x2%3D%2230.35%22%20y2%3D%2230.35%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Ctitle%3Eclose%3C%2Ftitle%3E%3Cuse%20width%3D%2230.71%22%20height%3D%2230.71%22%20transform%3D%22translate%280%200%29%20scale%280.98%29%22%20xlink%3Ahref%3D%22%23IRAME_CLOSE%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

article.suppliers .supplier-grid .supplier .popup .logo {
  width: calc(50% - 20px);
  padding-bottom: calc(50% - 20px);
}

article.suppliers .supplier-grid .supplier .popup h2 {
  color: #FC4237;
  font-size: 1.625em;
}

article.suppliers .supplier-grid .supplier .popup a {
  color: #FC4237;
}

@media (max-width: 800px) {
  article.suppliers .overlay.active {
    opacity: 0.9;
  }
  article.suppliers .supplier-grid .row {
    display: block;
    margin: 0;
  }
  article.suppliers .supplier-grid .supplier {
    margin-bottom: 20px;
    margin-left: 0;
    width: calc(100% - 20px);
  }
  article.suppliers .supplier-grid .supplier .logo {
    width: calc(50% - 20px);
    padding-bottom: calc(50% - 20px);
  }
  article.suppliers .supplier-grid .supplier .popup {
    width: calc(100% - 95px);
    max-width: 100%;
    min-width: 0;
    top: calc(50% + 40px);
  }
  article.suppliers .supplier-grid .supplier .popup h2 {
    font-size: 1.375em;
  }
  article.suppliers .supplier-grid .supplier .popup p {
    font-size: 0.875em;
  }
}

@media (max-height: 750px) {
  .supplier-grid .supplier .popup h2 {
    padding-top: 30px;
  }
  .supplier-grid .supplier .popup .logo {
    display: none;
  }
}

article.project {
  height: calc(100vh - 155px);
  position: relative;
}

.customize-support article.project {
  height: calc(100vh - 187px);
}

article.project .top-background {
  width: calc(25% + 40px);
  max-width: calc(320px + 40px);
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(127, 135, 146, 0.6);
  mix-blend-mode: multiply;
  position: absolute;
  z-index: 99;
  height: 42px;
  transition: height 500ms;
}

article.project .top-background.active {
  height: 100%;
  transition: height 500ms;
}

article.project .top {
  position: absolute;
  background: transparent;
  top: 0;
  left: 0;
  width: 25%;
  max-width: 320px;
  z-index: 100;
  color: #fff;
  height: 22px;
  overflow: hidden;
  transition: height 500ms;
}

article.project .top a {
  color: #fff;
}

article.project .top.active {
  height: calc(100% - 70px);
  transition: height 500ms;
}

article.project .top h1 {
  font-size: 2em;
  padding-top: 60px;
}

article.project .top h1:after {
  content: none;
}

article.project .top .subtitle {
  font-family: "Work Sans", sans-serif;
  font-weight: 300;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size: 1.0625em;
  padding: 5px 0;
}

article.project .top h2 {
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  font-size: 0.875em;
}

article.project .top .brands {
  text-transform: uppercase;
  font-size: 0.625em;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
}

article.project .top .consultation {
  background-color: #7F8792;
  border-radius: 8px;
  padding: 5px 10px;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: 0.10938em;
  text-decoration: none;
  margin-top: 15px;
  display: inline-block;
  transition: background-color 200ms;
}

article.project .top .consultation:hover {
  background-color: #4f545c;
  transition: background-color 200ms;
}

article.project .top .backlink {
  color: #838383;
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 10px 10px 40px;
  width: calc(100% - 50px);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms, color 200ms;
}

article.project .top .backlink:before {
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211.06%22%20height%3D%2220.71%22%20viewBox%3D%220%200%2011.06%2020.71%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23838383%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eback-arrow%3C%2Ftitle%3E%3Cpolyline%20class%3D%22cls-1%22%20points%3D%2210.71%2020.35%200.71%2010.35%2010.71%200.35%22%2F%3E%3C%2Fsvg%3E");
  position: absolute;
  top: 50%;
  left: 20px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  height: 21px;
}

article.project .top .backlink:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: #444;
  transition: background-color 200ms, color 200ms;
}

article.project .arrow-bg {
  position: absolute;
  z-index: 97;
  mix-blend-mode: multiply;
  top: 50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  opacity: 0.0;
  transition: opacity 500ms;
}

article.project .arrow-bg.active {
  opacity: 1.0;
  transition: opacity 500ms;
}

article.project .arrow-bg.next {
  right: 0;
}

article.project .arrow-bg.prev {
  left: 0;
}

article.project .next-link, article.project .prev-link {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  opacity: 0.0;
  transition: opacity 500ms, left 0 500ms;
  left: -10000px;
  z-index: 98;
}

article.project .next-link.active, article.project .prev-link.active {
  opacity: 1.0;
  transition: left 0s, opacity 500ms;
}

article.project .next-link.active {
  left: calc(100% - 20px);
  -webkit-transform: translate(-100%, -50%);
      -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}

article.project .prev-link.active {
  left: 20px;
}

article.project .images {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

article.project .images img {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0.0;
  z-index: 10;
  transition: opacity 500ms;
}

article.project .images img.taller {
  height: auto;
  width: 100%;
}

article.project .images img.wider {
  width: auto;
  height: 100%;
}

article.project .images img.equal {
  width: 100%;
  height: 100%;
}

article.project .images img.active {
  z-index: 12;
  opacity: 1.0;
  transition: opacity 500ms;
}

article.project .images img.next {
  z-index: 12;
  opacity: 1.0;
  transition: opacity 500ms;
}

article.project .images img.top-weight {
  top: 0;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

article.project .images img.bottom-weight {
  top: auto;
  bottom: 0;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

@media (max-width: 800px) {
  article.project .top {
    width: calc(100% - 140px);
    height: 26px;
  }
  article.project .top .backlink {
    font-size: 0.875em;
  }
  article.project .top-background {
    width: calc(100% - 100px);
    height: 39px;
  }
  article.project .arrow-bg {
    width: 80px;
  }
  article.project .next-link img, article.project .prev-link img {
    width: 55px;
  }
  article.project .next-link.active {
    left: calc(100% - 14px);
  }
  article.project .prev-link.active {
    left: 14px;
  }
}

article.projects-index {
  background-color: #fff;
  padding: 15px 0 0 0;
}

article.projects-index .project {
  display: inline-block;
  margin-left: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  width: calc(33.33% - (3.33333px + 10px));
  height: 21.3vw;
  position: relative;
}

article.projects-index .project:nth-child(n+1):nth-child(-n+2) {
  width: calc(50% - 10px);
  height: 32.1vw;
}

article.projects-index .project:nth-child(n+1):nth-child(-n+2) .text h2 {
  font-size: 1.875em;
}

article.projects-index .project:nth-child(n+1):nth-child(-n+2) .text .subtitle {
  font-size: 1.0625em;
}

article.projects-index .project:nth-child(1) {
  margin-left: 0;
}

article.projects-index .project:nth-child(3n+3) {
  margin-left: 0;
}

article.projects-index .project .bg {
  width: calc(25% + 40px);
  max-width: calc(320px + 40px);
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(127, 135, 146, 0.6);
  mix-blend-mode: multiply;
  position: absolute;
  z-index: 99;
  width: 50%;
  transition: background-color 300ms;
}

article.projects-index .project a {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

article.projects-index .project a:hover + .bg {
  background-color: #414141;
  transition: background-color 300ms;
}

article.projects-index .project .text {
  position: absolute;
  background: transparent;
  top: 0;
  left: 0;
  width: 25%;
  max-width: 320px;
  z-index: 100;
  color: #fff;
  width: calc(50% - 40px);
  padding: 20px;
}

article.projects-index .project .text a {
  color: #fff;
}

article.projects-index .project .text h2 {
  font-size: 1.3125em;
  margin: 0;
}

article.projects-index .project .text .subtitle {
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
  font-size: 0.8125em;
}

article.projects-index .project img {
  width: 100%;
  height: auto;
}

@media (max-width: 1200px) {
  article.projects-index .project .text h2 {
    font-size: 1.5625em !important;
  }
}

@media (max-width: 800px) {
  article.projects-index .project {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }
  article.projects-index .project .text h2 {
    font-size: 1.3125em !important;
  }
}

@media (min-width: 800px) {
  article.contact {
    position: relative;
  }
  article.contact .top-bg {
    width: calc(25% + 40px);
    max-width: calc(320px + 40px);
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(127, 135, 146, 0.6);
    mix-blend-mode: multiply;
    position: absolute;
    z-index: 99;
    background-color: #414141;
    left: 16px;
    top: 16px;
    width: 30%;
    height: calc(100% - 32px);
  }
  article.contact .top {
    position: absolute;
    background: transparent;
    top: 0;
    left: 0;
    width: 25%;
    max-width: 320px;
    z-index: 100;
    color: #fff;
    position: absolute;
    left: 16px;
    top: 16px;
    width: 30%;
    height: calc(100% - 53px);
    margin-bottom: 0;
    background: transparent;
  }
  article.contact .top a {
    color: #fff;
  }
  article.contact .top h1 {
    font-size: 2em;
  }
  article.contact .top h1:after {
    content: none;
  }
  article.contact .top .subtitle p {
    font-size: 1.0625em;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 10px 0;
  }
  article.contact .top p {
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
    font-size: 0.875em;
  }
  article.contact .acf-map {
    margin: 0;
  }
}

@media (max-width: 800px) {
  article.contact .top {
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}