@charset "UTF-8";
/********************************************************************************************* 

x. Variables

*********************************************************************************************/
/********************************************************************************************* 

x. Imports

*********************************************************************************************/
/********************************************************************************************* 

x. Slick

*********************************************************************************************/
@import url("https://use.typekit.net/wic0sbt.css");
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  opacity: 0.4;
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-slide a {
  display: block;
}

.slick-slide.slick-active {
  cursor: pointer;
}

.slick-slide.slick-center {
  cursor: default;
}

.slick-slide:before {
  content: "";
  width: auto;
  height: 100%;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  display: none; /**********************/
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide.slick-animate,
.slick-slide.slick-current {
  opacity: 1;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-dots {
  font-size: 0;
  text-align: center;
  padding: 30px 0;
  list-style: none;
}

.slick-dots li {
  text-indent: -999px;
  margin: 0 5px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.slick-dots li span {
  width: 10px;
  height: 10px;
  border: 2px solid black;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.slick-dots li span:hover,
.slick-dots li.slick-active span {
  background: black;
}

/********************************************************************************************* 

x. General Carousel

*********************************************************************************************/
.general-carousel .slick-slide .image img {
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -o-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.general-carousel .slick-slide.slick-animate .image img,
.general-carousel .slick-slide.slick-current .image img {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/********************************************************************************************* 

x. Interactive Device Carousel

*********************************************************************************************/
.interactive-device-carousel .slick-dots {
  padding-top: 40px;
}

.interactive-device-carousel .slide .browser,
.interactive-device-carousel .slide .telephone {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
}

/********************************************************************************************* 

x. Instagram Carousel

*********************************************************************************************/
.instagram-carousel {
  margin: 0 0 -15px 0;
}

/*
 * jquery.selectBoxIt.css 3.8.1
 * Author: @gregfranko
 */
/*
  Common CSS Properties
  ---------------------
  These properties will be applied to any themes that you use
*/
/* SelectBoxIt container */
.selectboxit-container {
  width: 100%;
  height: auto;
  margin: 0 5px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

/* Styles that apply to all SelectBoxIt elements */
.selectboxit-container * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  outline: none;
  white-space: nowrap;
}

/* Button */
.selectboxit-container .selectboxit {
  width: 115px !important;
  cursor: pointer;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  position: relative;
}

/* Height and Vertical Alignment of Text */
.selectboxit-container span, .selectboxit-container .selectboxit-options a {
  height: 35px; /* Height of the drop down */
  line-height: 35px; /* Vertically positions the drop down text */
  display: block;
}

/* Focus pseudo selector */
.selectboxit-container .selectboxit:focus {
  outline: 0;
}

/* Disabled Mouse Interaction */
.selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled {
  cursor: default;
}

/* Button Text */
.selectboxit-text {
  text-indent: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.selectboxit .selectboxit-option-icon-container {
  margin-left: 5px;
}

/* Options List */
.selectboxit-container .selectboxit-options {
  font-size: 1em;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 100% !important; /* Minimum Width of the dropdown list box options */
  *width: 100%;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  cursor: pointer;
  display: none;
  z-index: 9999999999999;
  text-align: left;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* Individual options */
.selectboxit-option .selectboxit-option-anchor {
  padding: 0 2px;
}

/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
  text-decoration: none;
}

/* Individual Option Optgroup Header */
.selectboxit-option,
.selectboxit-optgroup-header {
  text-indent: 5px; /* Horizontal Positioning of the select box option text */
  margin: 0;
  list-style-type: none;
  display: block !important;
}

/* Drop Down optgroup headers */
.selectboxit-optgroup-header {
  font-weight: bold;
}

/* Drop Down optgroup header hover psuedo class */
.selectboxit-optgroup-header:hover {
  cursor: default;
}

/* Drop Down down arrow container */
.selectboxit-arrow-container {
  width: 30px;
  position: absolute;
  right: 0;
}

/* Drop Down down arrow */
.selectboxit .selectboxit-arrow-container .selectboxit-arrow {
  margin: 0 auto;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

/* Drop Down down arrow for jQueryUI and jQuery Mobile */
.selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon {
  top: 30%;
}

/* Drop Down individual option icon positioning */
.selectboxit-option-icon-container {
  float: left;
}

.selectboxit-container .selectboxit-option-icon {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Drop Down individual option icon positioning */
.selectboxit-option-icon-url {
  width: 18px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  height: 100%;
  background-position: center;
  float: left;
}

.selectboxit-rendering {
  display: inline-block !important;
  *display: inline !important;
  zoom: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon {
  background-color: inherit;
}

/* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon-triangle-1-s {
  background-position: -64px -16px;
}

/*
  Default Theme
  -------------
  Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme
*/
.selectboxit-btn {
  color: #3D3D3D;
  background-color: #F5F2E7;
}

.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
  color: #3D3D3D;
}

.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus {
  color: #3D3D3D;
  text-decoration: none;
  background-position: 0 -15px;
}

.selectboxit-default-arrow {
  width: 0;
  height: 0;
  border-top: 4px solid #3D3D3D;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.selectboxit-list {
  background-color: #FBFAF5;
}

.selectboxit-list .selectboxit-option-anchor {
  color: #3D3D3D;
}

.selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor {
  color: #3D3D3D;
  background-color: #F5F2E7;
}

.selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor {
  color: #3D3D3D;
}

@media only screen and (max-width: 600px) {
  .selectboxit-container span, .selectboxit-container .selectboxit-options a {
    height: 30px;
    line-height: 30px;
  }
}
/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@-webkit-keyframes dropzone-passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-moz-keyframes dropzone-passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@keyframes dropzone-passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-webkit-keyframes dropzone-slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-moz-keyframes dropzone-slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes dropzone-slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes dropzone-pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes dropzone-pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes dropzone-pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.dropzone,
.dropzone * {
  box-sizing: border-box;
}

.dropzone {
  min-height: 150px;
  border: 2px solid #F5F2E7;
  background: white;
  padding: 20px 20px;
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0;
}

.dropzone .dz-message span {
  display: block;
}

.dropzone .dz-message span.small {
  font-size: 0.8em;
}

.dropzone .dz-message span:first-of-type {
  margin: 0 0 10px 0;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}

.dropzone .dz-preview:hover {
  z-index: 70;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  background: #F5F2E7;
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: #F5F2E7;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
  font-size: 12px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
  padding: 5px 0;
}

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
}

.dropzone .dz-preview .dz-details .dz-size strong {
  font-family: "TT Firs Medium";
  font-weight: normal;
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
}

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
  border: 2px solid #F5F2E7;
  border-bottom: none;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: dropzone-passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: dropzone-passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: dropzone-passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: dropzone-passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: dropzone-passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: dropzone-slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: dropzone-slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: dropzone-slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: dropzone-slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: dropzone-slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -37px;
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 50px;
  height: 50px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  /*
  -webkit-animation: dropzone-pulse 6s ease infinite;
  -moz-animation: dropzone-pulse 6s ease infinite;
  -ms-animation: dropzone-pulse 6s ease infinite;
  -o-animation: dropzone-pulse 6s ease infinite;
  animation: dropzone-pulse 6s ease infinite;
  */
}

.dropzone .dz-preview .dz-progress {
  opacity: 0;
  z-index: 70;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -14px;
  width: 80px;
  margin-left: -40px;
  background: white;
  -webkit-transform: scale(1);
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #3EB480;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: none;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 70;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #DE245C;
  padding: 0.5em 1.2em;
  color: white;
}

.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #DE245C;
}

/********************************************************************************************* 

x. Mixins

*********************************************************************************************/
/********************************************************************************************* 

x. Animations

*********************************************************************************************/
.animate.in-view.cover {
  -webkit-transition: height 1s cubic-bezier(0.5, 0, 0, 1);
  -moz-transition: height 1s cubic-bezier(0.5, 0, 0, 1);
  -ms-transition: height 1s cubic-bezier(0.5, 0, 0, 1);
  -o-transition: height 1s cubic-bezier(0.5, 0, 0, 1);
  transition: height 1s cubic-bezier(0.5, 0, 0, 1);
}

.animate.in-view.image canvas,
.animate.in-view.image img {
  -webkit-transition: all 1.25s ease;
  -moz-transition: all 1.25s ease;
  -ms-transition: all 1.25s ease;
  -o-transition: all 1.25s ease;
  transition: all 1.25s ease;
  -webkit-transition-delay: 0.25s;
  -moz-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.image.lazy img {
  -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.065, 1);
  -moz-transition: all 0.8s cubic-bezier(0.4, 0, 0.065, 1);
  -ms-transition: all 0.8s cubic-bezier(0.4, 0, 0.065, 1);
  -o-transition: all 0.8s cubic-bezier(0.4, 0, 0.065, 1);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.065, 1);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/********************************************************************************************* 

x. Blink + Bounce + Hand Wave + Rotate

*********************************************************************************************/
.blink {
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 79%, 100% {
    opacity: 1;
  }
  80%, 99% {
    opacity: 0;
  }
}
.blink-large {
  animation: blink-large 2s infinite;
}

@keyframes blink-large {
  10% {
    transform: none;
    animation-timing-function: ease-in;
  }
  12% {
    transform: translateY(55px) scaleY(0.3);
  }
  20% {
    animation-timing-function: ease-out;
  }
  22% {
    transform: none;
    animation-timing-function: ease-in;
  }
}
.blink-medium {
  animation: blink-medium 2s infinite;
}

@keyframes blink-medium {
  10% {
    transform: none;
    animation-timing-function: ease-in;
  }
  12% {
    transform: translateY(18px) scaleY(0.3);
  }
  20% {
    animation-timing-function: ease-out;
  }
  22% {
    transform: none;
    animation-timing-function: ease-in;
  }
}
.blink-small {
  animation: blink-small 2s infinite;
}

@keyframes blink-small {
  10% {
    transform: none;
    animation-timing-function: ease-in;
  }
  12% {
    transform: translateY(30px) scaleY(0.3);
  }
  20% {
    animation-timing-function: ease-out;
  }
  22% {
    transform: none;
    animation-timing-function: ease-in;
  }
}
.bounce-horizontal {
  -webkit-animation: bounce-horizontal 2s infinite linear;
  -moz-animation: bounce-horizontal 2s infinite linear;
  -ms-animation: bounce-horizontal 2s infinite linear;
  -o-animation: bounce-horizontal 2s infinite linear;
  animation: bounce-horizontal 2s infinite linear;
}

@keyframes bounce-horizontal {
  0%, 100% {
    margin-left: 0;
  }
  25% {
    margin-left: 10px;
  }
  75% {
    margin-left: -10px;
  }
}
.bounce-vertical {
  -webkit-animation: bounce-vertical 2s infinite linear;
  -moz-animation: bounce-vertical 2s infinite linear;
  -ms-animation: bounce-vertical 2s infinite linear;
  -o-animation: bounce-vertical 2s infinite linear;
  animation: bounce-vertical 2s infinite linear;
}

@keyframes bounce-vertical {
  0%, 100% {
    margin-top: 0;
  }
  25% {
    margin-top: 10px;
  }
  75% {
    margin-top: -10px;
  }
}
.hand-wave,
.hand-wave svg {
  -webkit-animation: hand-wave 1.5s infinite linear;
  -moz-animation: hand-wave 1.5s infinite linear;
  -ms-animation: hand-wave 1.5s infinite linear;
  -o-animation: hand-wave 1.5s infinite linear;
  animation: hand-wave 1.5s infinite linear;
}

@keyframes hand-wave {
  0%, 50%, 100% {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  75% {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
.pulse {
  -webkit-animation: pulse 1.5s infinite linear;
  -moz-animation: pulse 1.5s infinite linear;
  -ms-animation: pulse 1.5s infinite linear;
  -o-animation: pulse 1.5s infinite linear;
  animation: pulse 1.5s infinite linear;
}

@keyframes pulse {
  0%, 100% {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
}
.rotate {
  -webkit-animation: rotation 7s infinite linear;
  -moz-animation: rotation 7s infinite linear;
  -ms-animation: rotation 7s infinite linear;
  -o-animation: rotation 7s infinite linear;
  animation: rotation 7s infinite linear;
}

@keyframes rotation {
  0% {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/********************************************************************************************* 

x. Carousel

*********************************************************************************************/
.carousel .general-carousel .slide {
  -webkit-transition: opacity 0.125s ease;
  -moz-transition: opacity 0.125s ease;
  -ms-transition: opacity 0.125s ease;
  -o-transition: opacity 0.125s ease;
  transition: opacity 0.125s ease;
}
.carousel .general-carousel .slide .image img {
  -webkit-transition: transform 0.125s ease;
  -moz-transition: transform 0.125s ease;
  -ms-transition: transform 0.125s ease;
  -o-transition: transform 0.125s ease;
  transition: transform 0.125s ease;
}

/********************************************************************************************* 

x. Envelope

*********************************************************************************************/
.envelope svg:last-of-type {
  -webkit-animation: envelope 2s infinite linear;
  -moz-animation: envelope 2s infinite linear;
  -ms-animation: envelope 2s infinite linear;
  -o-animation: envelope 2s infinite linear;
  animation: envelope 2s infinite linear;
}

@keyframes envelope {
  0%, 49%, 100% {
    opacity: 0;
  }
  50%, 99% {
    opacity: 1;
  }
}
/********************************************************************************************* 

x. Extracurricular

*********************************************************************************************/
.extracurricular .cross-link {
  -webkit-transition: transform 1.25s ease;
  -moz-transition: transform 1.25s ease;
  -ms-transition: transform 1.25s ease;
  -o-transition: transform 1.25s ease;
  transition: transform 1.25s ease;
}

.extracurricular .cross-link .image {
  -webkit-transition: opacity 1.25s ease;
  -moz-transition: opacity 1.25s ease;
  -ms-transition: opacity 1.25s ease;
  -o-transition: opacity 1.25s ease;
  transition: opacity 1.25s ease;
}

/********************************************************************************************* 

x. Glitch

*********************************************************************************************/
.glitch.on-default,
.glitch.on-hover:hover {
  animation: glitch-skew 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s infinite;
}
.glitch.on-default .color.blue,
.glitch.on-hover:hover .color.blue {
  animation: glitch 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite reverse;
}
.glitch.on-default .color.green,
.glitch.on-hover:hover .color.green {
  animation: glitch 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms infinite;
}
.glitch.on-default .color.pink,
.glitch.on-hover:hover .color.pink {
  animation: glitch 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes glitch {
  0%, 100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-3px, 3px);
  }
  40% {
    transform: translate(-3px, -3px);
  }
  60% {
    transform: translate(3px, 3px);
  }
  80% {
    transform: translate(3px, -3px);
  }
}
@keyframes glitch-skew {
  0%, 100% {
    transform: skew(0deg, 0deg);
  }
  48%, 54% {
    transform: skew(0deg, 0deg);
    filter: blur(0);
  }
  50% {
    transform: skew(-20deg, 0deg);
    filter: blur(4px);
  }
  52% {
    transform: skew(20deg, 0deg);
  }
}
/********************************************************************************************* 

x. Interactive Image

*********************************************************************************************/
.interactive-image .points .point {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transition-delay: calc(var(--index) * 0.1s);
  -moz-transition-delay: calc(var(--index) * 0.1s);
  -ms-transition-delay: calc(var(--index) * 0.1s);
  -o-transition-delay: calc(var(--index) * 0.1s);
  transition-delay: calc(var(--index) * 0.1s);
}

.interactive-image .points .point:before {
  animation: pulse 2s infinite ease;
}

@keyframes pulse {
  0% {
    -moz-transform: translateX(-50%) translateY(-50%) scale(0);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
    -o-transform: translateX(-50%) translateY(-50%) scale(0);
    -ms-transform: translateX(-50%) translateY(-50%) scale(0);
    transform: translateX(-50%) translateY(-50%) scale(0);
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
    -moz-transform: translateX(-50%) translateY(-50%) scale(2);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(2);
    -o-transform: translateX(-50%) translateY(-50%) scale(2);
    -ms-transform: translateX(-50%) translateY(-50%) scale(2);
    transform: translateX(-50%) translateY(-50%) scale(2);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(-50%) translateY(-50%) scale(2);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(2);
    -o-transform: translateX(-50%) translateY(-50%) scale(2);
    -ms-transform: translateX(-50%) translateY(-50%) scale(2);
    transform: translateX(-50%) translateY(-50%) scale(2);
  }
}
/********************************************************************************************* 

x. Links

*********************************************************************************************/
a {
  -webkit-transition: color 0.125s ease;
  -moz-transition: color 0.125s ease;
  -ms-transition: color 0.125s ease;
  -o-transition: color 0.125s ease;
  transition: color 0.125s ease;
}

a svg {
  -webkit-transition: fill 0.125s ease;
  -moz-transition: fill 0.125s ease;
  -ms-transition: fill 0.125s ease;
  -o-transition: fill 0.125s ease;
  transition: fill 0.125s ease;
}

/********************************************************************************************* 

x. Header

*********************************************************************************************/
header.fixed {
  -webkit-transition: transform 0.25s linear;
  -moz-transition: transform 0.25s linear;
  -ms-transition: transform 0.25s linear;
  -o-transition: transform 0.25s linear;
  transition: transform 0.25s linear;
}

header .link .label,
header .logo {
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
  -ms-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

header .link .plus,
header .link .plus .line {
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

/********************************************************************************************* 

x. Highlight

*********************************************************************************************/
.highlight:before {
  -webkit-transition: width 0.25s cubic-bezier(0.5, 0, 0, 1);
  -moz-transition: width 0.25s cubic-bezier(0.5, 0, 0, 1);
  -ms-transition: width 0.25s cubic-bezier(0.5, 0, 0, 1);
  -o-transition: width 0.25s cubic-bezier(0.5, 0, 0, 1);
  transition: width 0.25s cubic-bezier(0.5, 0, 0, 1);
}

/********************************************************************************************* 

x. Single Page Navigation

*********************************************************************************************/
.single-page-navigation .navigation li a:after {
  -webkit-transition: width 0.25s ease;
  -moz-transition: width 0.25s ease;
  -ms-transition: width 0.25s ease;
  -o-transition: width 0.25s ease;
  transition: width 0.25s ease;
}

/********************************************************************************************* 

x. Person
x. Project
x. Story

*********************************************************************************************/
.person .link:hover .image img,
.project .link:hover .image img,
.story .link:hover .image img {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

/********************************************************************************************* 

x. Press
x. Related Projects

*********************************************************************************************/
.press .grid .item .image img,
.related-projects .grid .item .image img {
  -webkit-transition: transform 1.25s ease;
  -moz-transition: transform 1.25s ease;
  -ms-transition: transform 1.25s ease;
  -o-transition: transform 1.25s ease;
  transition: transform 1.25s ease;
}

/********************************************************************************************* 

x. Related Projects

*********************************************************************************************/
.related-projects .grid .item .images .hover {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/********************************************************************************************* 

x. Team

*********************************************************************************************/
.team .grid .full-information .inside {
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
  -ms-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

/********************************************************************************************* 

x. Text

*********************************************************************************************/
.text .expandable-content .title .link,
.text .expandable-content .title .link .plus,
.text .expandable-content .title .link .plus .line {
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.text .cross-link {
  -webkit-transition: transform 1.25s ease;
  -moz-transition: transform 1.25s ease;
  -ms-transition: transform 1.25s ease;
  -o-transition: transform 1.25s ease;
  transition: transform 1.25s ease;
}

.text .cross-link .image {
  -webkit-transition: opacity 1.25s ease;
  -moz-transition: opacity 1.25s ease;
  -ms-transition: opacity 1.25s ease;
  -o-transition: opacity 1.25s ease;
  transition: opacity 1.25s ease;
}

/********************************************************************************************* 

x. Woocommerce

*********************************************************************************************/
.woocommerce ul.products li.product a img {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/********************************************************************************************* 

x. Work

*********************************************************************************************/
.work .grid {
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
  -ms-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.work .grid .item .images .hover {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/********************************************************************************************* 

x. Fonts

*********************************************************************************************/
@font-face {
  font-family: "Bijoux";
  src: url("../fonts/BijouxRegular.woff2") format("woff2"), url("../fonts/BijouxRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Labil Grostesk";
  src: url("../fonts/LabilGrotesk-Regular.woff2") format("woff2"), url("../fonts/LabilGrotesk-Regular.woff") format("woff");
  font-feature-settings: "calt" 0;
  font-weight: normal;
  font-variant-alternates: historical-forms;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "TT Firs Bold";
  src: url("../fonts/ttfirs-bold-webfont.woff2") format("woff2"), url("../fonts/ttfirs-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "TT Firs Bold Italic";
  src: url("../fonts/ttfirs-bolditalic-webfont.woff2") format("woff2"), url("../fonts/ttfirs-bolditalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "TT Firs Medium";
  src: url("../fonts/ttfirs-medium-webfont.woff2") format("woff2"), url("../fonts/ttfirs-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "TT Firs Medium Italic";
  src: url("../fonts/ttfirs-mediumitalic-webfont.woff2") format("woff2"), url("../fonts/ttfirs-mediumitalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/********************************************************************************************* 

x. CSS Reset 

*********************************************************************************************/
* {
  margin: 0;
  padding: 0;
  min-height: 0;
  outline: none;
}

/********************************************************************************************* 

x. Typekit

*********************************************************************************************/
.wf-loading {
  visibility: hidden;
}

.wf-active {
  visibility: visible;
}

/*********************************************************************************************

x. Basic Setup (Body, Fonts, etc.) 

********************************************************************************************/
html, body {
  font: 24px "Labil Grostesk", sans-serif;
  color: #3D3D3D;
  width: auto;
  height: auto;
  background: white;
}

a {
  color: #3D3D3D;
  text-decoration: none;
}

a:hover {
  color: #A6A49D;
}

a img {
  border: none;
}

b,
strong {
  font-family: "TT Firs Bold", sans-serif;
  font-weight: normal;
}
b em,
b i,
strong em,
strong i {
  font-family: "TT Firs Bold Italic", sans-serif;
}

.center {
  text-align: center;
}

.clear:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

em,
i {
  font-family: "TT Firs Medium Italic", sans-serif;
  font-style: normal;
}
em b,
em strong,
i b,
i strong {
  font-family: "TT Firs Bold Italic", sans-serif;
}

.grecaptcha-badge {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  line-height: 1.5em;
}

h1.salt,
h2.salt,
h3.salt {
  font-feature-settings: "liga", "salt";
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1.167rem;
}

h4,
h5,
h6 {
  font-family: interstate-mono, monospace;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.35em;
  text-transform: uppercase;
}

h4 {
  font-size: 0.667rem;
}

h5 {
  font-size: 0.533rem;
}

h6 {
  font-size: 0.4rem;
}

.image.lazy {
  overflow: hidden;
}
.image.lazy.loaded img {
  filter: blur(0px);
}
.image.lazy img {
  filter: blur(30px);
}
.image img {
  width: 100%;
  height: auto;
  display: block;
}

.left {
  float: left;
}

p {
  line-height: 1.5em;
}

.right {
  float: right;
}

svg {
  display: block;
  overflow: hidden;
}

.uppercase {
  letter-spacing: 0.05em;
  text-transform: uppercase !important;
}

.wrapper {
  margin: 0 auto;
  position: relative;
}
.wrapper.large {
  width: 1400px;
}
.wrapper.medium {
  width: 1200px;
}
.wrapper.small {
  width: 1000px;
}

/********************************************************************************************* 

x. Margin + Padding

*********************************************************************************************/
.content ol,
.content ul,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 40px;
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

/********************************************************************************************* 

x. Columns & Widths

*********************************************************************************************/
.width-10 {
  width: 10%;
}

.width-15 {
  width: 15%;
}

.width-20 {
  width: 20%;
}

.width-25 {
  width: 25%;
}

.width-30 {
  width: 30%;
}

.width-33 {
  width: 33.33%;
}

.width-35 {
  width: 35%;
}

.width-40 {
  width: 40%;
}

.width-45 {
  width: 45%;
}

.width-50 {
  width: 50%;
}

.width-55 {
  width: 55%;
}

.width-60 {
  width: 60%;
}

.width-65 {
  width: 65%;
}

.width-66 {
  width: 66.66%;
}

.width-70 {
  width: 70%;
}

.width-75 {
  width: 75%;
}

.width-80 {
  width: 80%;
}

.width-85 {
  width: 85%;
}

.width-90 {
  width: 80%;
}

.width-95 {
  width: 95%;
}

.width-100 {
  width: 100%;
}

/********************************************************************************************* 

x. Content

*********************************************************************************************/
.content.center .highlight {
  margin-left: 0;
}
.content.center-headlines h1,
.content.center-headlines h2,
.content.center-headlines h3,
.content.center-headlines h4,
.content.center-headlines h5,
.content.center-headlines h6 {
  text-align: center;
}
.content .highlight {
  margin: 0 0 0 -40px;
}
.content ol,
.content ul {
  font-size: 0.667em;
}
.content ol.three-column, .content ol.two-column,
.content ul.three-column,
.content ul.two-column {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
}
.content ol.three-column li, .content ol.two-column li,
.content ul.three-column li,
.content ul.two-column li {
  margin: 0 -5px 20px -5px;
  padding: 0 20px;
  vertical-align: top;
}
.content ol.three-column li,
.content ul.three-column li {
  width: calc(33.33% - 40px);
  height: auto;
  /*
  &:nth-last-child(1),
  &:nth-last-child(2),
  &:nth-last-child(3) {
  	margin-bottom: 0;
  }
  */
}
.content ol.two-column li,
.content ul.two-column li {
  width: calc(50% - 40px);
  height: auto;
  /*
  &:nth-last-child(1),
  &:nth-last-child(2) {
  	margin-bottom: 0;
  }
  */
}
.content ol li,
.content ul li {
  line-height: 1.5em;
}
.content ol li h1,
.content ol li h2,
.content ol li h3,
.content ol li h4,
.content ol li h5,
.content ol li h6,
.content ul li h1,
.content ul li h2,
.content ul li h3,
.content ul li h4,
.content ul li h5,
.content ul li h6 {
  margin: 0 !important;
}
.content p .icon.center {
  text-align: center;
  margin: 0 0 20px 0;
  display: block;
}
.content p .icon.envelope {
  width: 40px;
  height: 35px;
  margin: 0 5px;
  position: relative;
}
.content p .icon.envelope svg:last-of-type {
  background: white;
  opacity: 0;
  position: absolute;
  top: 5px;
  left: 0;
}
.content p .icon.inline {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.content p .icon.hand-wave svg {
  margin: 0 5px 0 0;
  -moz-transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  transform-origin: right bottom;
}
.content p .icon svg {
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: relative;
  top: 5px;
}

.content > :last-child {
  margin-bottom: 0;
}

/********************************************************************************************* 

x. Animate

*********************************************************************************************/
.animate.in-view.content {
  opacity: 1;
}
.animate.in-view.cover {
  height: 0;
}
.animate.in-view.image img {
  opacity: 1;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.animate.content {
  opacity: 0;
}
.animate.cover {
  width: 100%;
  height: 100%;
  background: #F6FBC9;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.animate.image {
  position: relative;
  overflow: hidden;
}
.animate.image img {
  opacity: 0;
  -moz-transform: scale(1.075);
  -webkit-transform: scale(1.075);
  -o-transform: scale(1.075);
  -ms-transform: scale(1.075);
  transform: scale(1.075);
}

/********************************************************************************************* 

x. Arrow

*********************************************************************************************/
.arrow {
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: relative;
  top: -2px;
}
.arrow.left {
  margin: 0 10px 0 0;
  float: none;
}
.arrow.right {
  margin: 0 0 0 10px;
  float: none;
}

/********************************************************************************************* 

x. Badge

*********************************************************************************************/
.badge {
  width: 150px;
  height: auto;
  position: relative;
}
.badge .hand {
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 49%;
  left: 51%;
}
.badge .hand svg {
  -moz-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

/********************************************************************************************* 

x. Browser Mockup

*********************************************************************************************/
.browser {
  background: white;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  padding: 60px 0 0 0;
  position: relative;
}
.browser .address-bar {
  width: 50%;
  height: 60px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
}
.browser .address-bar .label {
  color: rgba(0, 0, 0, 0.15);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 30px;
  text-align: center;
  width: auto;
  height: 30px;
  background: #F2F2F2;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0 10px;
  display: block;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
.browser .buttons {
  position: absolute;
  top: 0;
  left: 0;
}
.browser iframe {
  width: 100%;
  height: 800px;
  display: block;
}
.browser .image {
  width: 100%;
  height: 800px;
  max-width: 1000px;
  overflow-y: scroll;
}
.browser .image.substitute {
  display: none;
}
.browser .menu {
  position: absolute;
  top: 0;
  right: 0;
}

/********************************************************************************************* 

x. Directions

*********************************************************************************************/
.directions {
  min-width: 500px;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 55%;
  left: 0;
}
.directions h4 {
  text-align: center;
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -moz-transform-origin: center top;
  -webkit-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
}

/********************************************************************************************* 

x. Filters

*********************************************************************************************/
.filters {
  margin: 40px 0 -5px 0;
  display: none;
  list-style: none;
}
.filters a {
  letter-spacing: 0.025em;
}
.filters li {
  margin: 2px 1px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.filters li.active .highlight:before {
  width: 100%;
}

/********************************************************************************************* 

x. Form

*********************************************************************************************/
form {
  font-size: 0.667em;
  text-align: left;
  background: white;
}
form .checkboxes {
  font-size: 16px;
  margin: 0 0 -10px 0;
  padding: 40px 20px 0 20px;
  display: block;
  list-style: none;
}
form .checkboxes li {
  line-height: 1em;
  margin: 0 5px 10px 5px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
form .checkboxes li .checkbox {
  font-family: "TT Firs Bold", sans-serif;
  letter-spacing: 0.2em;
  line-height: 1em;
  text-transform: uppercase;
  padding: 10px 30px;
  display: block;
  cursor: pointer;
}
form .checkboxes li .checkbox.checked {
  background: #F6FBC9;
}
form ol,
form ul {
  font-size: 1em !important;
}
form .nf-field-label .nf-label-span,
form .nf-field-label label {
  font-weight: 400;
}
form .divider {
  width: 100%;
  height: 3px;
  background: #F5F2E7;
  margin: 40px 0;
}
form .files_uploaded p {
  margin: 0;
}
form .files_uploaded p .delete {
  font-family: "TT Firs Bold", sans-serif;
  font-size: 1em;
  letter-spacing: 0.1em;
  line-height: 1em;
  text-transform: uppercase;
  margin: 0 0 0 10px;
}
form button,
form input[type=submit] {
  color: #3D3D3D;
  font-family: "TT Firs Bold", sans-serif;
  font-size: 1em;
  letter-spacing: 0.1em;
  line-height: 1em;
  text-transform: uppercase;
  width: auto;
  height: 40px;
  background: none;
  border: none;
  border-bottom: 2px solid #3D3D3D;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}
form input[type=email],
form input[type=text] {
  color: #3D3D3D;
  font-family: "TT Firs Medium", sans-serif;
  font-size: 1em;
  width: 100%;
  height: 40px;
  background: none;
  border: none;
  border: 2px solid #3D3D3D;
  border-width: 2px !important;
  padding: 0 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
form .inline-text {
  font-size: 1em;
  list-style: none;
}
form .inline-text li {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
}
form .inline-text li input[type=text].large {
  width: 290px;
}
form .inline-text li input[type=text].small {
  width: 200px;
}
form label {
  font-weight: 400 !important;
}
form label.error {
  color: #DE245C;
  font-family: "TT Firs Bold", sans-serif;
  font-size: 1em;
  line-height: 1em;
  margin: 10px 0 0 0;
  display: block;
}
form .loader {
  width: 50px;
  height: auto;
  margin: 0 auto 25px auto;
  display: none;
}
form .nf-error-msg {
  text-align: left;
}
form .nf-before-form-content {
  display: none;
}
form .nf-fu-progress {
  width: 100%;
  height: 30px;
  background: #F5F2E7;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
form .nf-fu-progress .nf-fu-progress-bar {
  line-height: 30px;
  background: #3D3D3D;
}
form .optional {
  padding: 40px 0 0 0;
}
form .submit {
  padding: 35px 0 0 0;
}
form textarea {
  color: #3D3D3D;
  font-family: "TT Firs Medium", sans-serif;
  font-size: 1em;
  width: 100%;
  height: 300px;
  background: #F5F2E7;
  border: none;
  padding: 50px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  resize: none;
}

/********************************************************************************************* 

x. Glitch

*********************************************************************************************/
.glitch {
  position: relative;
  overflow: visible;
}
.glitch.on-hover:hover .bottom {
  opacity: 0.8;
}
.glitch.on-hover .bottom {
  opacity: 0;
}
.glitch .bottom {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.glitch .top {
  position: relative;
  z-index: 20;
}
.glitch .color.black {
  fill: #3D3D3D;
}
.glitch .color.blue {
  fill: #00ccff;
}
.glitch .color.green {
  fill: #00ff66;
}
.glitch .color.pink {
  fill: #ff00ff;
}
.glitch .color.white {
  fill: white;
}

/********************************************************************************************* 

x. Highlight

*********************************************************************************************/
.highlight {
  color: #3D3D3D;
  line-height: 1.25em;
  padding: 15px 40px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: relative;
  z-index: 10;
}
.highlight:before {
  content: "";
  width: 0;
  height: auto;
  background: #FFBD92;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}
.highlight:hover {
  color: #3D3D3D;
}
.highlight:hover:before {
  width: 100%;
}
.highlight.icon {
  text-decoration: none !important;
}
.highlight.icon .icon,
.highlight.icon .label {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
}
.highlight.icon .icon {
  margin: 0 10px 0 0;
}
.highlight.icon .icon svg {
  fill: #3D3D3D;
  top: 3px;
}
.highlight.icon .label {
  text-decoration: underline;
}
.highlight.small {
  font-family: interstate-mono, monospace;
  font-size: 0.5em;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-right: 60px;
}
.highlight.small:after {
  content: "→";
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 35px;
}

/********************************************************************************************* 

x. Person
x. Project
x. Story

*********************************************************************************************/
.project .link,
.person .link,
.story .link {
  display: block;
}
.project .link:hover,
.person .link:hover,
.story .link:hover {
  color: #3D3D3D;
}
.project .link:hover .highlight:before,
.person .link:hover .highlight:before,
.story .link:hover .highlight:before {
  width: 100%;
}
.project .link:hover .image img,
.person .link:hover .image img,
.story .link:hover .image img {
  -moz-transform: scale(1.025);
  -webkit-transform: scale(1.025);
  -o-transform: scale(1.025);
  -ms-transform: scale(1.025);
  transform: scale(1.025);
}
.project .link .caption,
.project .link .categories,
.person .link .caption,
.person .link .categories,
.story .link .caption,
.story .link .categories {
  font-size: 0.6em;
  letter-spacing: 0.025em;
  margin: 15px 0 0 0;
  display: block;
}
.project .link .content,
.person .link .content,
.story .link .content {
  padding: 40px;
  display: block;
}
.project .link .image,
.project .link .title,
.person .link .image,
.person .link .title,
.story .link .image,
.story .link .title {
  margin: 0 0 20px 0;
  display: block;
  overflow: hidden;
}
.project .link .name,
.person .link .name,
.story .link .name {
  letter-spacing: 0.025em;
  line-height: 1em;
  text-transform: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.project .link .url,
.person .link .url,
.story .link .url {
  font-size: 0.533em;
  display: block;
}

/********************************************************************************************* 

x. Social Media

*********************************************************************************************/
.social-media {
  list-style: none;
}
.social-media a {
  width: auto;
  height: 25px;
  display: block;
}
.social-media a:hover svg {
  fill: #A6A49D;
}
.social-media a svg {
  width: auto;
  height: 100%;
}
.social-media li {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.social-media svg {
  fill: #3D3D3D;
}

/********************************************************************************************* 

x. Telephone Mockup

*********************************************************************************************/
.telephone {
  width: 350px;
  height: auto;
  background: white;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  padding: 20px;
  position: relative;
}
.telephone .address-bar {
  background: #F2F2F2;
  -webkit-border-top-left-radius: 30px;
  -webkit-border-top-right-radius: 30px;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-topright: 30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding: 40px 10px 10px 10px;
}
.telephone .address-bar .label {
  color: rgba(0, 0, 0, 0.15);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 30px;
  text-align: center;
  width: auto;
  height: 30px;
  background: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0 10px;
  display: block;
}
.telephone .image {
  width: 100%;
  height: 600px;
  border-bottom: 35px solid #F2F2F2;
  -webkit-border-bottom-right-radius: 30px;
  -webkit-border-bottom-left-radius: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  overflow-y: scroll;
}
.telephone .image.substitute {
  display: none;
}
.telephone iframe {
  width: 100%;
  height: 600px;
  border-bottom: 35px solid #F2F2F2;
  -webkit-border-bottom-right-radius: 30px;
  -webkit-border-bottom-left-radius: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  display: block;
}
.telephone .speaker-camera {
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
}

/********************************************************************************************* 

x. Underline

*********************************************************************************************/
.underline {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.075em;
  /*
  text-shadow: -2px -2px white, -2px 2px white, 2px -2px white, 2px 2px white;
  background-size: 1px 1em;
  box-shadow: inset 0 -0.15em white, inset 0 -0.2em $baltic-sea;
  display: inline;
  */
}

/********************************************************************************************* 

x. Header

*********************************************************************************************/
header.duplicate {
  visibility: hidden;
}
header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
}
header.fixed.headroom--pinned {
  -moz-transform: translateY(0%);
  -webkit-transform: translateY(0%);
  -o-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
header.fixed.headroom--unpinned {
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}
header.open {
  -moz-transform: translateY(0%) !important;
  -webkit-transform: translateY(0%) !important;
  -o-transform: translateY(0%) !important;
  -ms-transform: translateY(0%) !important;
  transform: translateY(0%) !important;
}
header.open .logo {
  opacity: 0;
}
header .alert {
  width: calc(100% + 100px);
  height: auto;
  background: black;
  margin: -50px -50px 50px -50px;
  padding: 10px;
  position: relative;
}
header .alert .content {
  color: #F5F2E7;
  font-size: 0.667em;
}
header .alert .content a {
  color: #F5F2E7;
}
header .alert .content a:after {
  content: "→";
  margin: 0 0 0 10px;
}
header .alert .content a:hover {
  opacity: 0.8;
}
header .cart {
  color: #3D3D3D;
  font-size: 0.667em;
  letter-spacing: 0.2em;
  line-height: 1em;
  display: block;
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
  position: relative;
  top: 0;
  left: 0;
}
header .hamburger {
  width: 30px;
  height: 15px;
  display: block;
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
  position: relative;
  top: 0;
  right: 0;
  /*
  &.open {
  	.line {
  		&:first-child,
  		&:last-child {
  			top: 50%;
  		}
  		&:first-child {
  			-moz-transform: translateY(-50%) rotate(-45deg);
  			-webkit-transform: translateY(-50%) rotate(-45deg);
  			-o-transform: translateY(-50%) rotate(-45deg);
  			-ms-transform: translateY(-50%) rotate(-45deg);
  			transform: translateY(-50%) rotate(-45deg);
  		}
  		&:last-child {
  			-moz-transform: translateY(-50%) rotate(45deg);
  			-webkit-transform: translateY(-50%) rotate(45deg);
  			-o-transform: translateY(-50%) rotate(45deg);
  			-ms-transform: translateY(-50%) rotate(45deg);
  			transform: translateY(-50%) rotate(45deg);
  		}
  	}
  }
  */
}
header .hamburger .line {
  width: 100%;
  height: 5px;
  background: black;
  display: block;
  position: absolute;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
header .hamburger .line:first-child {
  top: 0;
}
header .hamburger .line:last-child {
  top: calc(100% - 5px);
}
header .logo {
  margin: 0 auto;
  padding: 0;
  display: block;
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
  position: relative;
  top: 0;
  left: 0;
}
header .logo.horizontal {
  width: 360px;
}
header .logo.vertical {
  width: 180px;
}
header .notice {
  background: #FFBD92;
  padding: 20px 0;
}
header .top {
  background: #F5F2E7;
  padding: 50px 50px 45px 50px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

/********************************************************************************************* 

x. Header - Menu

*********************************************************************************************/
#menu {
  background: #F5F2E7;
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: transform 0.25s ease;
  -moz-transition: transform 0.25s ease;
  -ms-transition: transform 0.25s ease;
  -o-transition: transform 0.25s ease;
  transition: transform 0.25s ease;
}
#menu.open {
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -o-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
#menu .hamburger {
  width: 30px;
  height: 15px;
  display: block;
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 10;
}
#menu .hamburger .line {
  width: 100%;
  height: 5px;
  background: black;
  display: block;
  position: absolute;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
#menu .hamburger .line:first-child, #menu .hamburger .line:last-child {
  top: 50%;
}
#menu .hamburger .line:first-child {
  -moz-transform: translateY(-50%) rotate(-45deg);
  -webkit-transform: translateY(-50%) rotate(-45deg);
  -o-transform: translateY(-50%) rotate(-45deg);
  -ms-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);
}
#menu .hamburger .line:last-child {
  -moz-transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  -o-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
#menu .navigation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  list-style: none;
}
#menu .navigation a {
  padding: 15px 70px;
}
#menu .navigation li {
  margin: 0 0 10px 0;
  display: block;
}
#menu .navigation li:last-of-type {
  margin-bottom: 0;
}
#menu .navigation li.small {
  margin: 0 0 5px 0;
}
#menu .navigation li.small.line {
  padding: 20px 0 0 0;
  position: relative;
}
#menu .navigation li.small.line:after {
  content: "";
  width: 200px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
}
#menu .navigation li.small a {
  font-family: "TT Firs Bold", sans-serif;
  font-size: 0.667em;
}
#menu .ppl-ppl {
  width: 80px;
  height: auto;
  position: absolute;
  bottom: 50px;
  right: 50px;
}
#menu .social-media {
  position: absolute;
  bottom: 50px;
  left: 50px;
}
#menu .social-media li {
  margin: 0 15px 0 0;
}
#menu .social-media li:last-of-type {
  margin-right: 0;
}

/********************************************************************************************* 

x. Main

*********************************************************************************************/
main {
  padding: 100px 0 0 0;
  display: block;
  overflow: hidden;
}
main.no-padding {
  padding: 0;
}
main section.spacing {
  margin: 0 0 100px 0;
}
main section.spacing.full-width:first-child {
  margin-top: -100px;
}
main section.spacing.full-width:last-child {
  margin-bottom: 0;
}

section.full-width + section.full-width {
  margin-top: -100px;
}

/********************************************************************************************* 

x. Footer

*********************************************************************************************/
footer {
  text-align: center;
  padding: 60px 0;
  position: relative;
  z-index: 80;
}
footer .dei {
  width: 70px;
  height: auto;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
footer .dei svg {
  width: 100%;
  height: auto;
}
footer h5 {
  margin: 0 0 20px 0;
}
footer .ppl-ppl {
  width: 80px;
  height: auto;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 50px;
}
footer .social-media {
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50px;
  margin: 0 0 20px 0;
}
footer .social-media li {
  margin: 0 15px 0 0;
}
footer .social-media li:last-of-type {
  margin-right: 0;
}

/********************************************************************************************* 

x. Art Therapy

*********************************************************************************************/
.at-social .social-media {
  margin-top: 20px;
}
.at-social .social-media li {
  margin: 0 5px;
  vertical-align: middle;
}

/********************************************************************************************* 

x. Carousel

*********************************************************************************************/
.carousel {
  overflow: hidden;
}
.carousel .general-carousel .image {
  width: auto;
  height: 800px;
  padding: 0 100px;
}
.carousel .general-carousel .image img {
  width: auto;
  height: 100%;
}
.carousel .interactive-device-carousel .browser,
.carousel .interactive-device-carousel .telephone {
  margin: 30px 100px;
}

/********************************************************************************************* 

x. Extracurricular

*********************************************************************************************/
.extracurricular .columns {
  margin: 0 0 0 -100px;
}
.extracurricular .columns .column:first-of-type .inside {
  margin: 0 100px 0 0;
  padding: 200px 0 0 0;
  position: relative;
}
.extracurricular .columns .column:last-of-type .inside {
  margin: 0 0 0 100px;
}
.extracurricular .badge {
  margin: 0 0 0 calc(100% - 150px);
}
.extracurricular .cross-link {
  display: block;
  -moz-transform: translateX(calc(-100% + 300px));
  -webkit-transform: translateX(calc(-100% + 300px));
  -o-transform: translateX(calc(-100% + 300px));
  -ms-transform: translateX(calc(-100% + 300px));
  transform: translateX(calc(-100% + 300px));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.extracurricular .cross-link:hover {
  color: #3D3D3D;
  -moz-transform: translateX(calc(-100% + 320px));
  -webkit-transform: translateX(calc(-100% + 320px));
  -o-transform: translateX(calc(-100% + 320px));
  -ms-transform: translateX(calc(-100% + 320px));
  transform: translateX(calc(-100% + 320px));
}
.extracurricular .cross-link:hover .highlight:before {
  width: 100%;
}
.extracurricular .cross-link:hover .image {
  opacity: 1;
}
.extracurricular .cross-link .image {
  opacity: 0.4;
  width: auto;
  height: 700px;
  display: block;
}
.extracurricular .cross-link .image img {
  width: auto;
  height: 100%;
}
.extracurricular .cross-link .label {
  display: block;
  position: absolute;
  bottom: 120px;
  left: calc(100% - 100px);
}
.extracurricular .cross-link .label h4 {
  white-space: nowrap;
}
.extracurricular .instagram-carousel {
  margin: 0 0 30px 0;
}

/********************************************************************************************* 

x. Image

*********************************************************************************************/
.image {
  position: relative;
}
.image .badge {
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 0;
  left: 50%;
}

/********************************************************************************************* 

x. Images

*********************************************************************************************/
.images.image-alignment-bottom .columns, .images.image-alignment-center .columns, .images.image-alignment-top .columns {
  display: table;
}
.images.image-alignment-bottom .columns .column, .images.image-alignment-center .columns .column, .images.image-alignment-top .columns .column {
  display: table-cell;
  float: none;
}
.images.image-alignment-bottom .columns .column:first-of-type .inside, .images.image-alignment-center .columns .column:first-of-type .inside, .images.image-alignment-top .columns .column:first-of-type .inside {
  padding: 0 50px 0 0;
}
.images.image-alignment-bottom .columns .column:last-of-type .inside, .images.image-alignment-center .columns .column:last-of-type .inside, .images.image-alignment-top .columns .column:last-of-type .inside {
  padding: 0 0 0 50px;
}
.images.image-alignment-bottom.image-spacing-left .columns .column:first-of-type .inside {
  padding-bottom: 100px;
}
.images.image-alignment-bottom.image-spacing-right .columns .column:last-of-type .inside {
  padding-bottom: 100px;
}
.images.image-alignment-bottom .columns .column {
  vertical-align: bottom;
}
.images.image-alignment-center.image-spacing-left .columns .column:first-of-type .inside {
  padding-top: 100px;
}
.images.image-alignment-center.image-spacing-right .columns .column:last-of-type .inside {
  padding-top: 100px;
}
.images.image-alignment-center .columns .column {
  vertical-align: middle;
}
.images.image-alignment-offset.image-spacing-left .columns:first-of-type {
  padding-left: 100px;
}
.images.image-alignment-offset.image-spacing-right .columns:last-of-type {
  padding-right: 100px;
}
.images.image-alignment-offset .columns:first-of-type {
  margin: 0 0 50px 0;
}
.images.image-alignment-offset .columns:first-of-type:last-of-type {
  margin-bottom: 0;
}
.images.image-alignment-top.image-spacing-left .columns .column:first-of-type .inside {
  padding-top: 100px;
}
.images.image-alignment-top.image-spacing-right .columns .column:last-of-type .inside {
  padding-top: 100px;
}
.images.image-alignment-top .columns .column {
  vertical-align: top;
}

/********************************************************************************************* 

x. Image + Text

*********************************************************************************************/
.image-text {
  padding: 30px 0;
}
.image-text .columns {
  display: table;
}
.image-text .columns .column {
  display: table-cell;
  vertical-align: middle;
}
.image-text .columns .column:first-of-type .content {
  padding: 0 100px 0 0;
}
.image-text .columns .column:last-of-type .content {
  padding: 0 0 0 100px;
}

/********************************************************************************************* 

x. Interactive Device

*********************************************************************************************/
.interactive-device {
  padding: 100px 0;
}
.interactive-device .content {
  padding: 40px 0 0 0;
}
.interactive-device .content .highlight {
  color: white;
}
.interactive-device .content .highlight:hover {
  color: #3D3D3D;
}
.interactive-device .directions {
  left: -50px;
}
.interactive-device .directions h4 {
  color: white;
}

/********************************************************************************************* 

x. Interactive Image

*********************************************************************************************/
.interactive-image .columns {
  display: table;
}
.interactive-image .columns .column {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.interactive-image .columns .column:first-of-type .content {
  padding: 0 100px 0 0;
}
.interactive-image .columns .column:last-of-type .content {
  padding: 0 0 0 100px;
}
.interactive-image .image-wrapper {
  position: relative;
}
.interactive-image .image-wrapper .points {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.interactive-image .image-wrapper .points .point {
  width: 0;
  height: 0;
  position: absolute;
}
.interactive-image .image-wrapper .points .point:after {
  content: "";
  color: white;
  width: 20px;
  height: 20px;
  background: var(--color);
  border: 2px solid var(--color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
.interactive-image .image-wrapper .points .point:before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  opacity: 0.25;
  -moz-transform: translateX(-50%) translateY(-50%) scale(0);
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
  -o-transform: translateX(-50%) translateY(-50%) scale(0);
  -ms-transform: translateX(-50%) translateY(-50%) scale(0);
  transform: translateX(-50%) translateY(-50%) scale(0);
  position: absolute;
  top: 50%;
  left: 50%;
}

/********************************************************************************************* 

x. Logo

*********************************************************************************************/
.logo {
  padding: 200px 0;
}
.logo .wrapper {
  width: 500px;
}
.logo .wrapper svg {
  width: 100%;
  height: auto;
}
.logo .wrapper svg .letter-o path {
  fill: #E1E73C;
  animation-name: goOrange;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
.logo .wrapper svg .letter-r path {
  fill: #E1E73C;
  animation-name: goGray;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0.2s;
}
.logo .wrapper svg .letter-a path {
  fill: #E1E73C;
  animation-name: goGreen;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0.4s;
}
.logo .wrapper svg .letter-o path {
  transition-delay: 0s;
}
.logo .wrapper svg .letter-r path {
  transition-delay: 0.1s;
}
.logo .wrapper svg .letter-a path {
  transition-delay: 0.2s;
}

@keyframes goOrange {
  0% {
    fill: #E1E73C;
  }
  25% {
    fill: #FF9563;
  }
  50% {
    fill: #FF9563;
  }
  75% {
    fill: #E1E73C;
  }
}
@keyframes goGray {
  0% {
    fill: #E1E73C;
  }
  25% {
    fill: #9FAFAD;
  }
  50% {
    fill: #9FAFAD;
  }
  75% {
    fill: #E1E73C;
  }
}
@keyframes goGreen {
  0% {
    fill: #E1E73C;
  }
  25% {
    fill: #87B09F;
  }
  50% {
    fill: #87B09F;
  }
  75% {
    fill: #E1E73C;
  }
}
/********************************************************************************************* 

x. Map

*********************************************************************************************/
#map {
  width: 100%;
  height: 700px;
}

/********************************************************************************************* 

x. News + Press

*********************************************************************************************/
.news-press {
  padding: 75px 25px;
}
.news-press.grid {
  background: #F5F2E7;
}
.news-press.grid .grid {
  margin: 50px 0 0 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.news-press.grid .grid .item {
  position: relative;
}
.news-press.grid .grid .item .animate.cover {
  background: #F5F2E7;
}
.news-press.grid .grid .item .content {
  padding: 40px;
}
.news-press.grid .grid .item .content p {
  margin: 0 0 20px 0;
}
.news-press.grid .grid .item .content p.attribution {
  font-size: 0.677em;
  margin: 0 0 10px 0;
}
.news-press.grid .grid .item .content p:last-child {
  margin-bottom: 0 !important;
}
.news-press.grid .grid .item .content .project {
  font-family: interstate-mono, monospace;
  font-size: 0.5em;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.25em;
  text-transform: uppercase;
  background: #F5F2E7;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 10px 40px 10px 15px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: relative;
}
.news-press.grid .grid .item .content .project:after {
  content: "→";
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 45%;
  right: 15px;
}
.news-press.grid .grid .item .content .project:hover {
  color: #3D3D3D;
  background: #F6FBC9;
}
.news-press.grid .grid .item .image.featured {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  display: block;
  position: relative;
}
.news-press.grid .grid .item .image.featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.news-press.grid .grid .item .image.logo {
  margin: 0 0 20px 0;
  padding: 0;
  display: block;
}
.news-press.grid .grid .item .image.logo img {
  width: auto;
  height: 20px;
  max-width: 100%;
}
.news-press.grid .grid .item .inside {
  background: white;
  margin: 25px;
}
.news-press.grid ul.page-numbers {
  margin: 50px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.news-press.grid ul.page-numbers li {
  font-family: "TT Firs Bold", sans-serif;
  font-size: 0.677em;
  margin: 0 10px;
  list-style-type: none;
}
.news-press.grid ul.page-numbers li:before {
  display: none;
}
.news-press.grid ul.page-numbers li a.page-numbers,
.news-press.grid ul.page-numbers li span.page-numbers {
  color: white;
  line-height: 50px;
  text-align: center;
  width: 50px;
  height: 50px;
  background: #3D3D3D;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: block;
}
.news-press.grid ul.page-numbers li a.page-numbers.current,
.news-press.grid ul.page-numbers li span.page-numbers.current {
  background: #A6A49D;
}
.news-press.grid ul.page-numbers li a.page-numbers {
  text-decoration: none;
}
.news-press.grid ul.page-numbers li a.page-numbers.next, .news-press.grid ul.page-numbers li a.page-numbers.prev {
  color: #3D3D3D;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  width: auto;
  height: auto;
  background: none;
}
.news-press.grid ul.page-numbers li a.page-numbers.next:hover, .news-press.grid ul.page-numbers li a.page-numbers.prev:hover {
  color: #FFBD92;
  background: none;
}
.news-press.grid ul.page-numbers li a.page-numbers:hover {
  background: #A6A49D;
}
.news-press.single .content p {
  margin: 0 0 20px 0;
}
.news-press.single .content p.attribution {
  font-size: 0.677em;
  margin: 0 0 10px 0;
}
.news-press.single .content p:last-child {
  margin-bottom: 0 !important;
}
.news-press.single .content .project {
  font-family: interstate-mono, monospace;
  font-size: 0.5em;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.25em;
  text-transform: uppercase;
  background: #F5F2E7;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 10px 40px 10px 15px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: relative;
}
.news-press.single .content .project:after {
  content: "→";
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 45%;
  right: 15px;
}
.news-press.single .content .project:hover {
  color: #3D3D3D;
  background: #F6FBC9;
}
.news-press.single .image.featured {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  margin: 0 0 40px 0;
  display: block;
  position: relative;
}
.news-press.single .image.featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.news-press.single .image.logo {
  margin: 0 0 20px 0;
  padding: 0;
  display: block;
}
.news-press.single .image.logo img {
  width: auto;
  height: 20px;
  max-width: 100%;
}

/********************************************************************************************* 

x. Not Found

*********************************************************************************************/
.not-found {
  background: #F6FBC9;
  padding: 200px 0;
}
.not-found .glitch {
  width: 500px;
  height: auto;
  margin: 0 auto 100px auto;
}
.not-found .highlight:before {
  background: white;
}

/********************************************************************************************* 

x. Press
x. Related Projects

*********************************************************************************************/
.press,
.related-projects {
  background: #F5F2E7;
  padding: 100px 0;
}
.press .grid.masonry,
.related-projects .grid.masonry {
  margin: -50px;
  padding: 100px 0 0 0;
  display: block;
}
.press .grid.masonry .item,
.related-projects .grid.masonry .item {
  margin: 0 -2.5px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}
.press .grid.masonry .item .animate.cover,
.related-projects .grid.masonry .item .animate.cover {
  background: #F5F2E7;
}
.press .grid.masonry .item .image,
.related-projects .grid.masonry .item .image {
  display: block;
  position: relative;
}
.press .grid.masonry .item .images,
.related-projects .grid.masonry .item .images {
  display: block;
  position: relative;
}
.press .grid.masonry .item .images .default,
.related-projects .grid.masonry .item .images .default {
  display: block;
  position: relative;
}
.press .grid.masonry .item .images .hover,
.related-projects .grid.masonry .item .images .hover {
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.press .grid.masonry .item .inside,
.related-projects .grid.masonry .item .inside {
  background: white;
  margin: 50px;
}
.press .grid.masonry .item .link:hover .images .hover,
.related-projects .grid.masonry .item .link:hover .images .hover {
  opacity: 1;
}
.press .grid.stacked,
.related-projects .grid.stacked {
  margin: -50px;
  padding: 100px 0 0 0;
}
.press .grid.stacked .item .inside,
.related-projects .grid.stacked .item .inside {
  background: white;
  margin: 50px;
}
.press .grid.stacked .item .story .content,
.related-projects .grid.stacked .item .story .content {
  width: calc(100% - 300px);
  height: auto;
  padding: 50px;
  display: block;
}
.press .grid.stacked .item .story .image,
.related-projects .grid.stacked .item .story .image {
  width: 300px;
  height: auto;
  aspect-ratio: 1/1;
  display: block;
  position: relative;
}
.press .grid.stacked .item .story .image img,
.related-projects .grid.stacked .item .story .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.press .grid.stacked .item .story .link,
.related-projects .grid.stacked .item .story .link {
  display: flex;
  align-items: center;
}
.press .grid.stacked .item .story .link:hover .highlight:before,
.related-projects .grid.stacked .item .story .link:hover .highlight:before {
  width: 0;
}

.press .grid.masonry {
  padding: 100px 0;
}

/********************************************************************************************* 

x. Projects

*********************************************************************************************/
.projects.bottom .columns {
  margin: 100px 0 0 -100px;
}
.projects.top .columns {
  margin: 0 0 50px -100px;
}
.projects .columns .column:first-of-type .inside {
  margin: 0 100px 0 0;
}
.projects .columns .column:last-of-type .inside {
  margin: 0 0 0 100px;
  padding: 300px 0 0 0;
}
.projects .content {
  margin: 75px 0 0 0;
}
.projects .content svg {
  display: inline-block;
  zoom: 1;
  *display: inline;
}

/********************************************************************************************* 

x. Single Page Navigation

*********************************************************************************************/
.single-page-navigation {
  background: white;
  padding: 50px 0 100px 0;
  position: relative;
  z-index: 80;
}
.single-page-navigation .navigation {
  list-style: none;
}
.single-page-navigation .navigation li {
  margin: 0 40px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.single-page-navigation .navigation li:first-of-type {
  margin-left: 0;
}
.single-page-navigation .navigation li:last-of-type {
  margin-right: 0;
}
.single-page-navigation .navigation li.current-menu-item a:after {
  width: 100%;
}
.single-page-navigation .navigation li a {
  font-family: interstate-mono, monospace;
  font-size: 0.667em;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1em;
  text-transform: uppercase;
  position: relative;
}
.single-page-navigation .navigation li a:after {
  content: "";
  width: 0;
  height: 2px;
  background: black;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
}
.single-page-navigation .navigation li a:hover {
  color: black;
}
.single-page-navigation .navigation li a:hover:after {
  width: calc(100% - 5px);
}

/********************************************************************************************* 

x. Specialties

*********************************************************************************************/
.specialties {
  background: #F5F2E7;
  padding: 100px 0;
}
.specialties .highlight:before {
  background: white;
}

/********************************************************************************************* 

x. Team

*********************************************************************************************/
.team {
  overflow: hidden;
}
.team .grid {
  margin: 0 -50px;
  padding: 80px 0 0 0;
  display: block;
}
.team .grid .full-information {
  font-size: 0.667em;
  margin: 0 0 130px 0;
  display: none;
  position: relative;
}
.team .grid .full-information:last-child {
  margin-bottom: 0;
}
.team .grid .full-information:last-child .inside {
  padding-bottom: 150px;
}
.team .grid .full-information.visible .inside {
  opacity: 1;
}
.team .grid .full-information .inside {
  background: #F5F2E7;
  opacity: 0;
  padding: 100px 0;
}
.team .grid .full-information .inside:after, .team .grid .full-information .inside:before {
  content: "";
  width: 9999px;
  height: auto;
  background: #F5F2E7;
  position: absolute;
  top: 0;
  bottom: 0;
}
.team .grid .full-information .inside:after {
  left: 100%;
}
.team .grid .full-information .inside:before {
  right: 100%;
}
.team .grid .item {
  margin: 0 -2.5px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}
.team .grid .item.active .inside .highlight:before {
  width: 100%;
}
.team .grid .item.offset {
  position: relative;
  top: -80px;
}
.team .grid .item .inside {
  margin: 0 50px 50px 50px;
}
.team .grid .item .inside .full-information {
  display: none;
}

/********************************************************************************************* 

x. Text

*********************************************************************************************/
.text.padding {
  padding: 100px 0;
}
.text .animated-burger {
  width: 110px;
  height: auto;
  margin: 0 auto 40px auto;
}
.text .categories {
  list-style: none;
}
.text .categories li {
  margin: 0 0 20px 0;
}
.text .categories li:last-of-type {
  margin-bottom: 0;
}
.text .columns {
  margin: 80px -100px 0 -100px;
  display: block;
}
.text .columns .inside {
  padding: 0 100px;
}
.text .cross-link {
  display: block;
  -moz-transform: translateX(calc(100% - 100px));
  -webkit-transform: translateX(calc(100% - 100px));
  -o-transform: translateX(calc(100% - 100px));
  -ms-transform: translateX(calc(100% - 100px));
  transform: translateX(calc(100% - 100px));
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
.text .cross-link:hover {
  color: #3D3D3D;
  -moz-transform: translateX(calc(100% - 120px));
  -webkit-transform: translateX(calc(100% - 120px));
  -o-transform: translateX(calc(100% - 120px));
  -ms-transform: translateX(calc(100% - 120px));
  transform: translateX(calc(100% - 120px));
}
.text .cross-link:hover .highlight:before {
  width: 100%;
}
.text .cross-link:hover .image {
  opacity: 1;
}
.text .cross-link .image {
  opacity: 0.4;
  width: auto;
  height: 700px;
  display: block;
}
.text .cross-link .image img {
  width: auto;
  height: 100%;
}
.text .cross-link .label {
  display: block;
  position: absolute;
  bottom: 150px;
  right: calc(100% - 100px);
}
.text .cross-link .label h4 {
  white-space: nowrap;
}
.text .not-hiring {
  background: #F6FBC9;
  padding: 30px 100px;
  position: relative;
}
.text .not-hiring .close {
  width: 18px;
  height: 18px;
  display: block;
  -moz-transform: translateY(-50%) rotate(135deg);
  -webkit-transform: translateY(-50%) rotate(135deg);
  -o-transform: translateY(-50%) rotate(135deg);
  -ms-transform: translateY(-50%) rotate(135deg);
  transform: translateY(-50%) rotate(135deg);
  position: absolute;
  top: 50%;
  right: 40px;
  cursor: pointer;
}
.text .not-hiring .close:hover .line {
  background: #A6A49D;
}
.text .not-hiring .close .line {
  background: #3D3D3D;
  display: block;
  position: absolute;
}
.text .not-hiring .close .line:first-of-type {
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 2px;
  height: 18px;
  top: 0;
  left: 50%;
}
.text .not-hiring .close .line:last-of-type {
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 18px;
  height: 2px;
  top: 50%;
  left: 0;
}
.text .not-hiring .underline {
  text-shadow: -2px -2px #F6FBC9, -2px 2px #F6FBC9, 2px -2px #F6FBC9, 2px 2px #F6FBC9;
  background-size: 1px 1em;
  box-shadow: inset 0 -0.15em #F6FBC9, inset 0 -0.2em #3D3D3D;
  display: inline;
}
.text .not-hiring .underline:hover {
  box-shadow: inset 0 -0.15em #F6FBC9, inset 0 -0.2em #A6A49D;
}
.text .wrapper.small {
  z-index: 20;
}

.home .text {
  padding: 0 0 100px 0;
}

/********************************************************************************************* 

x. Thank You
x. Ugh oh

*********************************************************************************************/
#thank-you,
#uh-oh {
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.975);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
#thank-you.red,
#uh-oh.red {
  background: #FC6769;
}
#thank-you.red .background,
#uh-oh.red .background {
  mix-blend-mode: color-burn;
}
#thank-you.red .close:hover .line,
#uh-oh.red .close:hover .line {
  background: white;
}
#thank-you.red .message a:hover,
#uh-oh.red .message a:hover {
  color: white;
}
#thank-you.red .message .underline,
#uh-oh.red .message .underline {
  text-shadow: -2px -2px #FC6769, -2px 2px #FC6769, 2px -2px #FC6769, 2px 2px #FC6769;
  background-size: 1px 1em;
  box-shadow: inset 0 -0.15em #FC6769, inset 0 -0.2em #FC6769;
  display: inline;
}
#thank-you.red .message .underline:hover,
#uh-oh.red .message .underline:hover {
  box-shadow: inset 0 -0.15em #FC6769, inset 0 -0.2em #FC6769;
}
#thank-you .close,
#uh-oh .close {
  width: 18px;
  height: 18px;
  display: block;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 10;
  cursor: pointer;
}
#thank-you .close:hover .line,
#uh-oh .close:hover .line {
  background: #A6A49D;
}
#thank-you .close .line,
#uh-oh .close .line {
  background: #3D3D3D;
  display: block;
  position: absolute;
}
#thank-you .close .line:first-of-type,
#uh-oh .close .line:first-of-type {
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 2px;
  height: 18px;
  top: 0;
  left: 50%;
}
#thank-you .close .line:last-of-type,
#uh-oh .close .line:last-of-type {
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 18px;
  height: 2px;
  top: 50%;
  left: 0;
}
#thank-you .background,
#uh-oh .background {
  opacity: 0.125;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
#thank-you .message,
#uh-oh .message {
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 10;
}

/********************************************************************************************* 

x. Tooltip

*********************************************************************************************/
.ui-tooltip {
  color: white;
  font-size: 12px;
  line-height: 1.25em;
  max-width: 350px;
  background: black;
  padding: 15px 20px;
  position: absolute;
  z-index: 9999;
}
.ui-tooltip.image {
  padding: 0;
  max-width: 500px;
}

/********************************************************************************************* 

x. Work

*********************************************************************************************/
.work {
  overflow: hidden;
}
.work .grid {
  margin: 0 -50px;
  display: block;
}
.work .grid .item {
  margin: 0 -2.5px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}
.work .grid .item .images {
  display: block;
  position: relative;
}
.work .grid .item .images .image.default {
  display: block;
  position: relative;
}
.work .grid .item .images .image.default:before {
  content: "";
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.work .grid .item .images .image.default.landscape:before {
  padding: 60% 0 0 0;
}
.work .grid .item .images .image.default.portrait:before {
  padding: 140% 0 0 0;
}
.work .grid .item .images .image.default.square:before {
  padding: 100% 0 0 0;
}
.work .grid .item .images .image.hover {
  opacity: 0;
  margin: 0;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.work .grid .item .images .image img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.work .grid .item .inside {
  margin: 0 50px 50px 50px;
}
.work .grid .item .link .highlight:before {
  background: #F5F2E7;
}
.work .grid .item .link:hover .images .hover {
  opacity: 1;
}
.work .page-identifier {
  display: none;
}

/********************************************************************************************* 

x. Approach - Hello

*********************************************************************************************/
#hello {
  padding: 100px 0 0 0;
  overflow: hidden;
}
#hello .animated-doggy {
  width: 250px;
  height: auto;
  margin: 0 auto 40px auto;
}
#hello h1 {
  font-size: 2.333em;
}
#hello .wrapper.medium {
  margin-top: 100px;
}
#hello .wrapper.medium:after, #hello .wrapper.medium:before {
  content: "";
  width: 9999px;
  height: auto;
  background: #F5F2E7;
  position: absolute;
  top: 50%;
  bottom: 0;
}
#hello .wrapper.medium:after {
  left: 100%;
}
#hello .wrapper.medium:before {
  right: 100%;
}

/********************************************************************************************* 

x. Approach - How We Work

*********************************************************************************************/
#how-we-work {
  background: #F5F2E7;
  padding: 100px 0;
}
#how-we-work .animated-brain {
  max-width: 120px;
  margin: 0 auto 40px auto;
}
#how-we-work h1 {
  font-size: 2.333em;
}
#how-we-work .underline {
  text-shadow: -2px -2px #F6FBC9, -2px 2px #F6FBC9, 2px -2px #F6FBC9, 2px 2px #F6FBC9;
  background-size: 1px 1em;
  box-shadow: inset 0 -0.15em #F6FBC9, inset 0 -0.2em #3D3D3D;
  display: inline;
}
#how-we-work .underline:hover {
  box-shadow: inset 0 -0.15em #F6FBC9, inset 0 -0.2em #A6A49D;
}

/********************************************************************************************* 

x. Approach - FAQ

*********************************************************************************************/
#faq {
  padding: 100px 0;
}
#faq .content {
  margin: 0 0 30px 0;
}
#faq .expandable-content {
  border-bottom: 3px solid #F5F2E7;
}
#faq .expandable-content.open .title .link .plus {
  -moz-transform: translateY(-50%) rotate(135deg);
  -webkit-transform: translateY(-50%) rotate(135deg);
  -o-transform: translateY(-50%) rotate(135deg);
  -ms-transform: translateY(-50%) rotate(135deg);
  transform: translateY(-50%) rotate(135deg);
  cursor: pointer;
}
#faq .expandable-content .content {
  margin: 0 0 60px 0;
  display: none;
}
#faq .expandable-content .title .link {
  text-align: center;
  padding: 50px 0;
  display: block;
  position: relative;
}
#faq .expandable-content .title .link:hover .plus .line {
  background: #A6A49D;
}
#faq .expandable-content .title .link .plus {
  width: 10px;
  height: 10px;
  display: block;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
}
#faq .expandable-content .title .link .plus .line {
  background: #3D3D3D;
  position: absolute;
}
#faq .expandable-content .title .link .plus .line:first-of-type {
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  top: 0;
  left: 50%;
}
#faq .expandable-content .title .link .plus .line:last-of-type {
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 10px;
  height: 2px;
  top: 50%;
  left: 0;
}
#faq h1 {
  font-size: 2.333em;
}

/********************************************************************************************* 

x. Approach - Get In Touch

*********************************************************************************************/
#get-in-touch {
  background: #F6FBC9;
  padding: 100px 0;
}
#get-in-touch .expandable-content {
  border: 3px solid #F5F2E7;
  margin: 0 0 15px 0;
}
#get-in-touch .expandable-content:last-of-type {
  margin-bottom: 0;
}
#get-in-touch .expandable-content.open .title .link {
  background: white;
}
#get-in-touch .expandable-content.open .title .link .plus {
  -moz-transform: translateY(-50%) rotate(135deg);
  -webkit-transform: translateY(-50%) rotate(135deg);
  -o-transform: translateY(-50%) rotate(135deg);
  -ms-transform: translateY(-50%) rotate(135deg);
  transform: translateY(-50%) rotate(135deg);
  cursor: pointer;
}
#get-in-touch .expandable-content .content {
  font-size: 0.667em;
  margin: 0 0 60px 0;
  padding: 50px;
  display: none;
}
#get-in-touch .expandable-content .content .checkboxes {
  font-size: 16px;
  padding-top: 0;
}
#get-in-touch .expandable-content .content label.error {
  font-size: 0.75em;
}
#get-in-touch .expandable-content .content input[type=text] {
  font-size: 1em;
}
#get-in-touch .expandable-content .title .link {
  text-align: left;
  background: #F5F2E7;
  border-bottom: 3px solid #F5F2E7;
  margin: 0 0 -3px 0;
  padding: 25px;
  display: block;
  position: relative;
}
#get-in-touch .expandable-content .title .link:hover .plus .line {
  background: #A6A49D;
}
#get-in-touch .expandable-content .title .link .plus {
  width: 10px;
  height: 10px;
  display: block;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 25px;
}
#get-in-touch .expandable-content .title .link .plus .line {
  background: #3D3D3D;
  position: absolute;
}
#get-in-touch .expandable-content .title .link .plus .line:first-of-type {
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  top: 0;
  left: 50%;
}
#get-in-touch .expandable-content .title .link .plus .line:last-of-type {
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 10px;
  height: 2px;
  top: 50%;
  left: 0;
}
#get-in-touch h1 {
  font-size: 2.333em;
}
#get-in-touch .underline {
  text-shadow: -2px -2px #F6FBC9, -2px 2px #F6FBC9, 2px -2px #F6FBC9, 2px 2px #F6FBC9;
  background-size: 1px 1em;
  box-shadow: inset 0 -0.15em #F6FBC9, inset 0 -0.2em #3D3D3D;
  display: inline;
}
#get-in-touch .underline:hover {
  box-shadow: inset 0 -0.15em #F6FBC9, inset 0 -0.2em #A6A49D;
}

/********************************************************************************************* 

x. Services

*********************************************************************************************/
#services .content {
  margin: 0 0 30px 0;
}
#services .expandable-content {
  border-bottom: 3px solid #F5F2E7;
}
#services .expandable-content.open .title .link .plus {
  -moz-transform: translateY(-50%) rotate(135deg);
  -webkit-transform: translateY(-50%) rotate(135deg);
  -o-transform: translateY(-50%) rotate(135deg);
  -ms-transform: translateY(-50%) rotate(135deg);
  transform: translateY(-50%) rotate(135deg);
  cursor: pointer;
}
#services .expandable-content .content {
  font-size: 0.667em;
  margin: 0 0 60px 0;
  display: none;
}
#services .expandable-content .content ol,
#services .expandable-content .content ul {
  font-size: 1em;
}
#services .expandable-content .content ol.three-column, #services .expandable-content .content ol.two-column,
#services .expandable-content .content ul.three-column,
#services .expandable-content .content ul.two-column {
  text-align: center;
}
#services .expandable-content .title .link {
  text-align: center;
  padding: 50px 0;
  display: block;
  position: relative;
}
#services .expandable-content .title .link:hover .plus .line {
  background: #A6A49D;
}
#services .expandable-content .title .link .plus {
  width: 10px;
  height: 10px;
  display: block;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
}
#services .expandable-content .title .link .plus .line {
  background: #3D3D3D;
  position: absolute;
}
#services .expandable-content .title .link .plus .line:first-of-type {
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  top: 0;
  left: 50%;
}
#services .expandable-content .title .link .plus .line:last-of-type {
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 10px;
  height: 2px;
  top: 50%;
  left: 0;
}

/********************************************************************************************* 

x. WordPress Core

*********************************************************************************************/
.aligncenter,
.alignleft,
.alignnone,
.alignright {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto 40px auto;
}

.wp-caption {
  max-width: 100%;
  text-align: center;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-family: "TT Firs Bold", sans-serif;
  font-size: 0.4em;
  letter-spacing: 0.2em;
  line-height: 1.35em;
  text-transform: uppercase;
  margin: -30px 0 0 0;
  padding: 0;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/********************************************************************************************* 

x. Imports

*********************************************************************************************/
/********************************************************************************************* 

x. General

*********************************************************************************************/
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6 {
  text-transform: capitalize;
}

.woocommerce input.text {
  padding: 0;
}

.woocommerce table.shop_table {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: none;
  margin: 0 0 40px 0;
}

@media only screen and (max-width: 700px) {
  .woocommerce table.shop_table {
    margin: 0 0 30px 0;
  }
}
.woocommerce table.shop_table td {
  border-top: 2px solid #F5F2E7;
  padding: 30px;
  vertical-align: top;
}

@media only screen and (max-width: 768px) {
  .woocommerce table.shop_table td {
    padding: 30px 0;
  }
}
.woocommerce table.shop_table th {
  font-family: "Labil Grostesk";
  font-weight: normal;
  padding: 30px;
}

.woocommerce table.shop_table td:first-of-type,
.woocommerce table.shop_table th:first-of-type {
  padding-left: 0;
}

.woocommerce table.shop_table td:last-of-type,
.woocommerce table.shop_table th:last-of-type {
  padding-right: 0;
}

.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  font-family: "Labil Grostesk";
  font-weight: normal;
  border-top: 2px solid #F5F2E7;
}

@media only screen and (max-width: 768px) {
  .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background: transparent;
  }
  .woocommerce table.shop_table_responsive tr td:before,
.woocommerce-page table.shop_table_responsive tr td:before {
    font-family: "Labil Grostesk";
    font-weight: normal;
  }
}
.woocommerce-page .woocommerce {
  font-size: 0.6em;
}

@media only screen and (max-width: 1200px) {
  .woocommerce-page .woocommerce {
    font-size: 0.56em;
  }
}
@media only screen and (max-width: 800px) {
  .woocommerce-page .woocommerce {
    font-size: 0.7em;
  }
}
.woocommerce-page .woocommerce .text {
  font-size: 1.667em;
  font-size: 1em;
}

@media only screen and (max-width: 500px) {
  .woocommerce-page .woocommerce .text {
    font-size: 1.417em;
  }
}
.woocommerce-page .woocommerce .text h1,
.woocommerce-page .woocommerce .text h2,
.woocommerce-page .woocommerce .text h3,
.woocommerce-page .woocommerce .text h4,
.woocommerce-page .woocommerce .text h5,
.woocommerce-page .woocommerce .text h6 {
  text-transform: none;
}

.woocommerce-page .wrapper.small {
  margin-bottom: 100px;
}

@media only screen and (max-width: 1500px) {
  .woocommerce-page .wrapper.small {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 700px) {
  .woocommerce-page .wrapper.small {
    margin-bottom: 30px;
  }
}
.woocommerce ul#shipping_method li {
  margin: 0;
}

.woocommerce-page .woocommerce .underline {
  text-shadow: -1px -1px white, -1px 1px white, 1px -1px white, 1px 1px white;
}

.woocommerce-page .woocommerce .content ol,
.woocommerce-page .woocommerce .content ul,
.woocommerce-page .woocommerce h1,
.woocommerce-page .woocommerce h2,
.woocommerce-page .woocommerce h3,
.woocommerce-page .woocommerce h4,
.woocommerce-page .woocommerce h5,
.woocommerce-page .woocommerce h6,
.woocommerce-page .woocommerce p {
  margin-bottom: 30px;
}

/********************************************************************************************* 

x. Buttons

*********************************************************************************************/
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: interstate-mono, monospace;
  font-size: 1em !important;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1em;
  text-transform: uppercase;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 20px 40px;
}

@media only screen and (max-width: 800px) {
  .woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    padding: 15px 30px;
  }
}
@media only screen and (max-width: 700px) {
  .woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    padding: 15px;
  }
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  color: #3D3D3D;
  background: #F5F2E7;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  color: #3D3D3D;
  background: #F5F2E7;
}

.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled, .woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
  padding: 20px 40px;
}

/********************************************************************************************* 

x. Form

*********************************************************************************************/
.select2-container--default .select2-selection--single,
.select2-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.select2-search--dropdown {
  padding: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  font-family: "Labil Grostesk";
  font-size: 18px;
  width: 100%;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
}

.select2-results__option {
  font-size: 18px;
  padding: 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  color: #3D3D3D;
  background: #F6FBC9;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: "Labil Grostesk";
  font-size: 18px;
  line-height: 1em;
  min-height: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 5px;
  right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: rgba(0, 0, 0, 0.1) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
}

.select2-container .select2-selection--single {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 10px;
}

.woocommerce form .form-row {
  margin: 0 0 15px 0;
}

#billing_address_1_field,
#shipping_address_1_field {
  margin: 0 0 5px 0;
}

.woocommerce form .form-row label {
  text-transform: capitalize;
}

.woocommerce form .form-row .optional {
  margin: 0 0 0 5px;
}

.woocommerce form .woocommerce-input-wrapper strong {
  font-family: "Labil Grostesk";
}

.woocommerce form .form-row .required,
.woocommerce form .form-row.woocommerce-invalid label {
  color: #BE6753;
}

.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: #BE6753;
}

.woocommerce form .form-row.woocommerce-validated .select2-container,
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: rgba(0, 0, 0, 0.1);
}

.woocommerce form .form-row textarea {
  font-family: "Labil Grostesk";
  font-size: 18px;
  width: auto;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px;
  resize: none;
}

.woocommerce form .form-row label {
  font-family: "Labil Grostesk";
  font-size: 0.667em;
  letter-spacing: 0.2em;
  line-height: 1em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.woocommerce input.input-text {
  font-family: "Labil Grostesk";
  font-size: 18px;
  width: auto;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px;
}

/********************************************************************************************* 

x. Messages

*********************************************************************************************/
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
  color: #3D3D3D;
  text-align: center;
  background: #F5F2E7;
  border: none;
  margin: 0 0 40px 0;
  padding: 20px;
}

@media only screen and (max-width: 700px) {
  .woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
    margin: 0 0 30px 0;
  }
}
.woocommerce .woocommerce-message:before,
.woocommerce .woocommerce-error:before,
.woocommerce .woocommerce-info:before {
  display: none;
}

.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button {
  font-size: 1em !important;
  white-space: nowrap;
  background: none;
  margin: 0 auto 20px auto;
  padding: 0;
  display: block;
  float: none;
}

.woocommerce .woocommerce-error .button:after,
.woocommerce .woocommerce-info .button:after,
.woocommerce .woocommerce-message .button:after {
  content: "→";
  margin: 0 0 0 10px;
}

.woocommerce .woocommerce-error .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-message .button:hover {
  background: none;
}

.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-error a,
.woocommerce .woocommerce-info a {
  color: #3D3D3D;
}

.woocommerce .woocommerce-message a:hover,
.woocommerce .woocommerce-error a:hover,
.woocommerce .woocommerce-info a:hover {
  color: #000;
}

/********************************************************************************************* 

x. Loop

*********************************************************************************************/
.woocommerce ul.products,
.woocommerce-page ul.products {
  margin: 0 -20px -30px 0;
  display: block;
}

@media only screen and (max-width: 900px) {
  .woocommerce ul.products,
.woocommerce-page ul.products {
    margin: 0 0 -30px 0;
  }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  margin: 0 20px 30px 0;
}

@media only screen and (max-width: 900px) {
  .woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 0 30px 0;
    float: none;
  }
}
.woocommerce ul.products li.product a {
  display: block;
  position: relative;
}

@media only screen and (max-width: 900px) {
  .woocommerce ul.products li.product a {
    text-align: center;
    width: 400px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 600px) {
  .woocommerce ul.products li.product a {
    text-align: left;
    width: 100%;
  }
}
.woocommerce ul.products li.product a:hover img:last-of-type {
  opacity: 1;
}

.woocommerce ul.products li.product a img {
  margin: 0 0 10px 0;
}

.woocommerce ul.products li.product a img:first-of-type,
.woocommerce ul.products li.product a img:first-of-type:last-of-type {
  position: relative;
  z-index: 10;
}

.woocommerce ul.products li.product a img:last-of-type {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
  color: #3D3D3D !important;
  text-transform: none;
  padding: 0 0 5px 0;
}

.woocommerce ul.products li.product .price {
  color: #3D3D3D;
  margin: 0;
}

/********************************************************************************************* 

x. Single Product

*********************************************************************************************/
.woocommerce div.product:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.woocommerce div.product .product_title {
  text-transform: none;
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
  width: calc(50% - 20px);
}

@media only screen and (max-width: 900px) {
  .woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
    width: 100%;
  }
  .woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
    width: 100%;
    position: relative !important;
    top: 0 !important;
  }
}
.woocommerce div.product div.images,
.woocommerce div.product div.images .woocommerce-product-gallery__image:last-of-type,
.woocommerce div.product div.summary {
  margin: 0;
}

@media only screen and (max-width: 900px) {
  .woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
    margin: 0 0 30px 0;
  }
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  margin: 0 0 10px 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
  width: 100%;
  display: block;
}

.woocommerce div.product form.cart {
  margin: 0;
}

.woocommerce div.product form.cart .button {
  width: auto;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.woocommerce div.product form.cart div.quantity {
  margin: 0 0 30px 0;
  float: none;
}

.woocommerce div.product form.cart div.quantity:before {
  content: "Qty";
  font-size: 0.667em;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  margin: 0 5px 0 0;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #3D3D3D;
  font-family: "Labil Grostesk";
  font-size: 1em;
}

.woocommerce div.product .product_meta {
  display: none;
}

/********************************************************************************************* 

x. Cart

*********************************************************************************************/
.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop {
  text-align: center;
}

@media only screen and (max-width: 900px) {
  .woocommerce-cart table.cart {
    margin: 0 0 20px 0;
  }
}
@media only screen and (max-width: 768px) {
  .woocommerce-cart table.cart {
    margin: 0;
  }
}
.woocommerce-cart table.cart td.product-remove,
.woocommerce-cart table.cart th.product-remove {
  display: none;
}

#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
  width: 15%;
  padding-left: 0;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
  width: 100%;
  height: auto;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  width: calc(50% - 10px - 60px);
  border: 5px solid #F5F2E7;
  padding: 30px;
}

@media only screen and (max-width: 768px) {
  .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    width: auto;
  }
}
#add_payment_method .wc-proceed-to-checkout,
.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce-checkout .wc-proceed-to-checkout {
  padding-bottom: 0;
}

#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
  margin: 0;
}

#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
  font-family: "Labil Grostesk";
  border-top: 2px solid #F5F2E7;
}

.woocommerce-cart .cart-collaterals .cart_totals strong {
  font-family: "Labil Grostesk" !important;
}

#add_payment_method .cart-collaterals .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-destination,
.woocommerce-checkout .cart-collaterals .cart_totals .woocommerce-shipping-destination {
  display: none;
}

.wcppec-checkout-buttons {
  margin-bottom: 0;
}

.wcppec-checkout-buttons__button {
  padding-top: 0;
}

/********************************************************************************************* 

x. Checkout

*********************************************************************************************/
/*
#billing_stateSelectBoxItContainer,
#shipping_stateSelectBoxItContainer,
.woocommerce-checkout #order_review_heading {
	display: none;
}
*/
.woocommerce-checkout #order_review_heading {
  display: none;
}

@media only screen and (max-width: 768px) {
  .woocommerce-checkout table.shop_table {
    margin: 0;
  }
}
.woocommerce-checkout #order_review {
  border: 5px solid #F5F2E7;
  margin: 30px 0 0 0;
  padding: 30px;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: #F5F2E7;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
  background: rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  display: none !important;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
  border-color: rgba(0, 0, 0, 0.05);
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  top: auto;
  bottom: 100%;
}

#add_payment_method #payment .payment_method_paypal .about_paypal,
.woocommerce-cart #payment .payment_method_paypal .about_paypal,
.woocommerce-checkout #payment .payment_method_paypal .about_paypal {
  display: none;
}

#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
  border-color: rgba(0, 0, 0, 0.05);
}

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
  border-left: 5px solid white;
  border-right: 5px solid white;
  display: none;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  width: 100%;
  float: none;
}

.woocommerce-billing-fields {
  padding: 0 0 25px 0;
}

.woocommerce-checkout-review-order-table thead {
  display: none;
}

.woocommerce-checkout-review-order-table tbody tr:first-of-type td {
  border-top: none;
}

.woocommerce-checkout-review-order-table tfoot td {
  padding-left: 30px !important;
}

.woocommerce-checkout-review-order-table tfoot th {
  padding-right: 30px !important;
}

.woocommerce-checkout-review-order-table strong,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  font-family: "Labil Grostesk" !important;
}

.woocommerce-terms-and-conditions-link {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 0.1em;
}

/********************************************************************************************* 

x. Order Details (After Checkout)

*********************************************************************************************/
.woocommerce ul.order_details {
  margin: 0 0 40px 0;
}

@media only screen and (max-width: 700px) {
  .woocommerce ul.order_details {
    margin: 0 0 30px 0;
  }
}
.woocommerce ul.order_details li {
  font-family: "Labil Grostesk";
  letter-spacing: 0.2em;
  text-transform: uppercase;
  width: 20%;
  border: none;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 1000px) {
  .woocommerce ul.order_details li {
    width: 100%;
    margin: 0 0 30px 0;
  }
  .woocommerce ul.order_details li:last-of-type {
    margin-bottom: 0;
  }
}
.woocommerce ul.order_details li strong {
  font-family: "Labil Grostesk";
  letter-spacing: normal;
  margin: 20px 0 0 0;
}

.woocommerce .woocommerce-customer-details address {
  line-height: 1.5em;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 0;
}

.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone {
  padding: 0;
}

.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email:before,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone:before {
  display: none;
}

@media only screen and (max-width: 768px) {
  .woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
    margin: 0 0 30px 0;
  }
}
/********************************************************************************************* 

x. Bijoux

*********************************************************************************************/
.postid-4718 main {
  padding: 0;
}
.postid-4718 .woocommerce-notices-wrapper .woocommerce-message {
  margin: 100px 0 40px 0;
}

#product-4718 {
  display: flex;
  flex-direction: column-reverse;
}
#product-4718 .type-tester {
  width: 100%;
  height: auto;
  background: #E3FCA7;
  padding: 200px 0;
  position: relative;
}
#product-4718 .type-tester:after, #product-4718 .type-tester:before {
  content: "";
  width: 9999px;
  height: auto;
  background: #E3FCA7;
  position: absolute;
  top: 0;
  bottom: 0;
}
#product-4718 .type-tester:after {
  left: 100%;
}
#product-4718 .type-tester:before {
  right: 100%;
}
#product-4718 .type-tester .about,
#product-4718 .type-tester .try-me {
  font-family: interstate-mono, monospace;
  font-size: 0.533rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.35em;
  text-transform: uppercase;
}
#product-4718 .type-tester .about {
  display: block;
  position: absolute;
  bottom: 50px;
  left: 0;
}
#product-4718 .type-tester .size-adjuster {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 50px;
  right: 0;
  list-style: none;
}
#product-4718 .type-tester .size-adjuster li {
  font-family: interstate-mono, monospace;
  font-size: 0.533rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.35em;
  text-transform: uppercase;
}
#product-4718 .type-tester .size-adjuster li:not(:last-child) {
  margin: 0 15px 0 0;
}
#product-4718 .type-tester .size-adjuster li input[type=range] {
  width: 100%;
  background: none;
  -webkit-appearance: none;
}
#product-4718 .type-tester .size-adjuster li input[type=range]:focus {
  outline: none;
}
#product-4718 .type-tester .size-adjuster li input[type=range]::-webkit-slider-runnable-track {
  color: transparent;
  width: 100%;
  height: 2px;
  background: black;
  cursor: pointer;
}
#product-4718 .type-tester .size-adjuster li input[type=range]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  background: black;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin: -10px 0 0 0;
  cursor: pointer;
  -webkit-appearance: none;
}
#product-4718 .type-tester .size-adjuster li input[type=range]:focus::-webkit-slider-runnable-track {
  background: black;
}
#product-4718 .type-tester .size-adjuster li input[type=range]::-moz-range-track {
  color: transparent;
  width: 100%;
  height: 2px;
  background: black;
  cursor: pointer;
}
#product-4718 .type-tester .size-adjuster li input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: black;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin: -10px 0 0 0;
  cursor: pointer;
}
#product-4718 .type-tester .size-adjuster li input[type=range]::-ms-track {
  color: transparent;
  width: 100%;
  height: 2px;
  background: black;
  cursor: pointer;
}
#product-4718 .type-tester .size-adjuster li input[type=range]::-ms-fill-lower {
  background: black;
}
#product-4718 .type-tester .size-adjuster li input[type=range]::-ms-fill-upper {
  background: black;
}
#product-4718 .type-tester .size-adjuster li input[type=range]::-ms-thumb {
  width: 20px;
  height: 20px;
  background: black;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin: -10px 0 0 0;
  cursor: pointer;
}
#product-4718 .type-tester .size-adjuster li input[type=range]:focus::-ms-fill-lower {
  background: black;
}
#product-4718 .type-tester .size-adjuster li input[type=range]:focus::-ms-fill-upper {
  background: black;
}
#product-4718 .type-tester .tester {
  color: #ff6e35;
  font-family: "Bijoux";
  text-align: center;
  font-size: 250px;
  white-space: normal;
  word-wrap: break-word;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
#product-4718 .type-tester .try-me {
  line-height: 50px;
  width: auto;
  height: 50px;
  border: 1px solid #3D3D3D;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  padding: 0 40px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: absolute;
  top: 50px;
  right: 0;
}
#product-4718 form.cart .button {
  float: none;
}
#product-4718 form.cart .quantity {
  display: none;
}
#product-4718 .images,
#product-4718 .summary {
  width: 100%;
}
#product-4718 .images .woocommerce-product-gallery__image {
  margin: 0;
}
#product-4718 .summary {
  text-align: center;
  padding: 80px 0;
  top: 0 !important;
}

@media only screen and (max-width: 1500px) {
  #product-4718 .woocommerce-product-gallery {
    width: calc(100% + 100px);
    margin: 0 -50px;
  }
}
@media only screen and (max-width: 1100px) {
  #product-4718 .type-tester {
    padding: 180px 0;
  }
  #product-4718 .type-tester .tester {
    font-size: 150px;
  }
}
@media only screen and (max-width: 700px) {
  #product-4718 .type-tester {
    padding: 140px 0;
  }
  #product-4718 .type-tester .tester {
    font-size: 75px;
  }
  #product-4718 .woocommerce-product-gallery {
    width: calc(100% + 60px);
    margin: 0 -30px;
  }
}
@media only screen and (max-width: 500px) {
  #product-4718 .type-tester .about {
    display: none;
  }
  #product-4718 .type-tester .size-adjuster {
    align-content: stretch;
    left: 0;
  }
  #product-4718 .type-tester .size-adjuster li:last-child {
    flex-grow: 3;
  }
  #product-4718 .type-tester .try-me {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 40px;
    left: 50%;
    right: auto;
  }
}
/*********************************************************************************************

x. Basic Setup (Body, Fonts, etc.) 

********************************************************************************************/
@media only screen and (max-width: 1500px) {
  .wrapper.large {
    width: auto;
    margin: 0 50px;
  }
}
@media only screen and (max-width: 1300px) {
  .wrapper.medium {
    width: auto;
    margin: 0 50px;
  }
}
@media only screen and (max-width: 1200px) {
  html, body {
    font-size: 25px;
  }
  h6 {
    font-size: 0.533rem;
  }
}
@media only screen and (max-width: 1100px) {
  .wrapper.small {
    width: auto;
    margin: 0 50px;
  }
}
@media only screen and (max-width: 800px) {
  html, body {
    font-size: 20px;
  }
  h5,
h6 {
    font-size: 0.667rem;
  }
}
@media only screen and (max-width: 700px) {
  .wrapper.large,
.wrapper.medium,
.wrapper.small {
    margin: 0 30px;
  }
}
@media only screen and (max-width: 500px) {
  h1 {
    font-size: 1.267em;
  }
  h2 {
    font-size: 1.133em;
  }
  h3 {
    font-size: 1.067em;
  }
  h4,
h5,
h6 {
    letter-spacing: normal;
  }
  .uppercase {
    letter-spacing: normal;
  }
  .wrapper .wrapper {
    margin: 0;
  }
}
/********************************************************************************************* 

x. Header

*********************************************************************************************/
@media only screen and (max-width: 1600px) {
  header .alert {
    margin: -30px -50px 30px -50px;
  }
  header .logo.horizontal {
    width: 340px;
  }
  header .logo.vertical {
    width: 170px;
  }
  header .top {
    padding: 30px 50px 25px 50px;
  }
}
@media only screen and (max-width: 1300px) {
  header .logo.horizontal {
    width: 300px;
  }
  header .logo.vertical {
    width: 150px;
  }
}
@media only screen and (max-width: 800px) {
  header .cart {
    font-size: 0.667em;
  }
  header .hamburger {
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  header .logo.horizontal {
    width: 260px;
  }
  header .logo.vertical {
    width: 130px;
  }
}
@media only screen and (max-width: 700px) {
  header .alert {
    margin: -30px -30px 30px -30px;
  }
  header .top {
    padding: 30px 30px 25px 30px;
  }
}
@media only screen and (max-width: 600px) {
  header .alert {
    margin: -20px -30px 20px -30px;
  }
  header .logo.horizontal {
    width: 220px;
  }
  header .logo.vertical {
    width: 110px;
  }
  header .top {
    padding: 20px 30px 15px 30px;
  }
}
@media only screen and (max-width: 500px) {
  header .logo.horizontal,
header .logo.vertical {
    margin: 0;
  }
}
@media only screen and (max-height: 800px) {
  header .menu .navigation li {
    margin: 0 0 10px 0;
  }
  header .menu .navigation li.small.line {
    padding: 10px 0 0 0;
  }
}
@media only screen and (max-height: 700px) {
  header .menu .navigation li {
    margin: 0;
  }
  header .menu .navigation li.small.line {
    padding: 0;
  }
}
/********************************************************************************************* 

x. Main

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  main section.spacing {
    margin: 0 0 50px 0;
  }
  section.full-width + section.full-width {
    margin-top: -50px;
  }
}
@media only screen and (max-width: 700px) {
  main {
    padding: 60px 0 0 0;
  }
  main section.spacing {
    margin: 0 0 30px 0;
  }
  main section.spacing.full-width:first-child {
    margin-top: -60px;
  }
  section.full-width + section.full-width {
    margin-top: -30px;
  }
}
@media only screen and (max-width: 500px) {
  main {
    padding: 30px 0 0 0;
  }
  main section.spacing.full-width:first-child {
    margin-top: -30px;
  }
}
/********************************************************************************************* 

x. Footer

*********************************************************************************************/
@media only screen and (max-width: 900px) {
  footer .ppl-ppl,
footer .social-media {
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
  }
  footer .ppl-ppl {
    width: 70px;
    height: auto;
    margin: 0 auto;
  }
  footer .social-media {
    margin: 50px 0;
  }
}
@media only screen and (max-width: 800px) {
  footer {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 700px) {
  footer {
    padding: 30px 20px;
  }
}
@media only screen and (max-width: 600px) {
  footer .social-media {
    margin: 30px 0;
  }
}
@media only screen and (max-width: 500px) {
  footer .ppl-ppl {
    width: 60px;
    height: auto;
  }
}
/********************************************************************************************* 

x. Badge

*********************************************************************************************/
@media only screen and (max-width: 1000px) {
  .badge {
    width: 100px;
  }
  .badge .hand svg {
    width: 30px;
    height: auto;
  }
  .badge .label svg {
    width: 100px;
    height: 100px;
  }
}
/********************************************************************************************* 

x. Approach - Hello

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  #hello .wrapper.medium {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 900px) {
  #hello .animated-doggy {
    width: 200px;
  }
  #hello h1 {
    font-size: 1.667em;
  }
}
@media only screen and (max-width: 800px) {
  #hello {
    padding: 50px 0 0 0;
  }
}
@media only screen and (max-width: 700px) {
  #hello {
    padding: 30px 0 0 0;
  }
  #hello .wrapper.medium {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 600px) {
  #hello {
    padding: 60px 0 0 0;
  }
  #hello .animated-doggy {
    width: 150px;
  }
}
@media only screen and (max-width: 500px) {
  #hello h1 {
    font-size: 1.267em;
  }
}
/********************************************************************************************* 

x. Approach - How We Work

*********************************************************************************************/
@media only screen and (max-width: 900px) {
  #how-we-work h1 {
    font-size: 1.667em;
  }
}
@media only screen and (max-width: 800px) {
  #how-we-work {
    padding: 50px 0;
  }
  #how-we-work .content p .icon svg {
    width: 40px;
    height: auto;
    max-height: 60px;
  }
}
@media only screen and (max-width: 700px) {
  #how-we-work {
    padding: 30px 0;
  }
}
@media only screen and (max-width: 600px) {
  #how-we-work .animated-brain {
    width: 100px;
    margin: 0 auto 30px auto;
  }
}
@media only screen and (max-width: 500px) {
  #how-we-work h1 {
    font-size: 1.267em;
  }
}
/********************************************************************************************* 

x. Approach - FAQ

*********************************************************************************************/
@media only screen and (max-width: 900px) {
  #faq h1 {
    font-size: 1.667em;
  }
}
@media only screen and (max-width: 800px) {
  #faq {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 700px) {
  #faq {
    padding: 30px 0;
  }
  #faq .expandable-content .content {
    margin: 0 0 30px 0;
  }
  #faq .expandable-content .title .link {
    text-align: left;
    padding: 30px 60px 30px 0;
  }
}
@media only screen and (max-width: 500px) {
  #faq h1 {
    font-size: 1.267em;
  }
}
/********************************************************************************************* 

x. Approach - Get In Touch

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  #get-in-touch {
    padding: 100px 0 50px 0;
  }
  #get-in-touch form {
    margin: 50px 0 0 0;
  }
}
@media only screen and (max-width: 1200px) {
  #get-in-touch form .checkboxes li .checkbox {
    font-size: 0.875em;
    padding: 10px 20px;
  }
}
@media only screen and (max-width: 1100px) {
  #get-in-touch form {
    padding: 50px;
  }
}
@media only screen and (max-width: 900px) {
  #get-in-touch form .inline-text li input[type=text].large {
    width: 200px;
  }
  #get-in-touch h1 {
    font-size: 1.667em;
  }
}
@media only screen and (max-width: 800px) {
  #get-in-touch {
    padding: 50px 0;
  }
  #get-in-touch form .checkboxes li .checkbox {
    font-size: 0.75em;
    padding: 10px;
  }
}
@media only screen and (max-width: 700px) {
  #get-in-touch {
    padding: 30px 0;
  }
  #get-in-touch .expandable-content .content {
    padding: 30px;
  }
  #get-in-touch .expandable-content .title .link {
    padding: 30px 60px 30px 30px;
  }
  #get-in-touch form {
    margin: 30px 0 0 0;
    padding: 30px;
  }
  #get-in-touch form .inline-text li input[type=text].small {
    width: 150px;
  }
  #get-in-touch form .submit {
    padding: 30px 0 0 0;
  }
  #get-in-touch form textarea {
    height: 200px;
    padding: 30px;
  }
}
@media only screen and (max-width: 600px) {
  #get-in-touch form .inline-text li input[type=text].large {
    width: 150px;
  }
  #get-in-touch form .inline-text li input[type=text].small {
    width: 100px;
  }
}
@media only screen and (max-width: 500px) {
  #get-in-touch {
    padding: 30px 0 0 0;
  }
  #get-in-touch form {
    margin: 30px -30px 0 -30px;
  }
  #get-in-touch h1 {
    font-size: 1.267em;
  }
}
/********************************************************************************************* 

x. Browser

*********************************************************************************************/
@media only screen and (max-width: 800px) {
  .browser iframe,
.browser .image {
    height: 600px;
  }
}
@media only screen and (max-width: 600px) {
  .browser iframe,
.browser .image {
    height: 500px;
  }
}
@media only screen and (max-width: 500px) {
  .browser iframe {
    display: none;
  }
  .browser .image.substitute {
    display: block;
  }
}
/********************************************************************************************* 

x. Carousel

*********************************************************************************************/
@media only screen and (max-width: 1800px) {
  .carousel .general-carousel .image {
    padding: 0 50px;
  }
}
@media only screen and (max-width: 1400px) {
  .carousel .general-carousel .image {
    height: 600px;
    padding: 0 25px;
  }
}
@media only screen and (max-width: 1100px) {
  .carousel .general-carousel .image {
    height: 600px;
    padding: 0;
  }
}
@media only screen and (max-width: 1000px) {
  .carousel .general-carousel .image {
    height: 500px;
  }
}
@media only screen and (max-width: 900px) {
  .carousel .general-carousel .image {
    height: 400px;
    padding: 0 5px;
  }
}
@media only screen and (max-width: 800px) {
  .carousel .general-carousel .image {
    height: 300px;
  }
}
@media only screen and (max-width: 600px) {
  .carousel .general-carousel .image {
    height: 200px;
  }
}
@media only screen and (max-width: 400px) {
  .carousel .general-carousel .image {
    height: 150px;
  }
}
/********************************************************************************************* 

x. Content

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .content ol li h1,
.content ol li h2,
.content ol li h3,
.content ol li h4,
.content ol li h5,
.content ol li h6,
.content ul li h1,
.content ul li h2,
.content ul li h3,
.content ul li h4,
.content ul li h5,
.content ul li h6 {
    font-size: 1em;
  }
}
@media only screen and (max-width: 800px) {
  .content p .icon.envelope {
    width: 30px;
    height: 26px;
  }
  .content p .icon.envelope svg,
.content p .icon.hand-wave svg {
    width: 30px;
    height: auto;
  }
  .content ol,
.content ul {
    font-size: 0.867em;
  }
}
@media only screen and (max-width: 600px) {
  .content ol.three-column li,
.content ol.two-column li,
.content ul.three-column li,
.content ul.two-column li {
    padding: 0 15px;
  }
  .content ol.three-column li,
.content ul.three-column li {
    width: calc(50% - 30px);
  }
}
@media only screen and (max-width: 500px) {
  .content ol.three-column li,
.content ul.three-column li,
.content ol.two-column li,
.content ul.two-column li {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
  }
}
/********************************************************************************************* 

x. Directions

*********************************************************************************************/
@media only screen and (max-width: 600px) {
  .directions {
    display: none;
  }
}
/********************************************************************************************* 

x. Extracurricular

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .extracurricular .cross-link .image {
    height: 650px;
  }
}
@media only screen and (max-width: 1200px) {
  .extracurricular .cross-link .image {
    height: 600px;
  }
}
@media only screen and (max-width: 1100px) {
  .extracurricular .cross-link .image {
    height: 550px;
  }
  .extracurricular .cross-link .label {
    bottom: 60px;
  }
}
@media only screen and (max-width: 1000px) {
  .extracurricular .badge {
    margin: 0 0 0 calc(100% - 100px);
  }
  .extracurricular .columns .column:first-of-type .inside {
    padding: 100px 0 0 0;
  }
  .extracurricular .cross-link .image {
    height: 500px;
  }
}
@media only screen and (max-width: 900px) {
  .extracurricular .cross-link .image {
    height: 450px;
  }
  .extracurricular .cross-link .label {
    left: calc(100% - 200px);
  }
}
@media only screen and (max-width: 800px) {
  .extracurricular .badge {
    width: 100px;
    height: 100px;
    margin: 0 auto 50px auto;
  }
  .extracurricular .columns {
    margin: 0 0 0 -50px;
  }
  .extracurricular .columns .column:first-of-type .inside {
    margin: 0 25px 0 0;
    padding: 50px 0 0 0;
  }
  .extracurricular .columns .column:last-of-type .inside {
    margin: 0 0 0 25px;
  }
  .extracurricular .cross-link {
    position: relative;
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .extracurricular .cross-link:hover {
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .extracurricular .cross-link .image,
.extracurricular .cross-link .image img {
    width: 100%;
    height: auto;
  }
  .extracurricular .cross-link .image {
    opacity: 1;
  }
  .extracurricular .cross-link .label {
    margin: 50px 0 0 50px;
    position: relative;
    bottom: 0;
    left: 0;
  }
}
@media only screen and (max-width: 700px) {
  .extracurricular .badge {
    margin: 0 auto 30px auto;
  }
  .extracurricular .columns {
    margin: 0 0 0 -30px;
  }
  .extracurricular .columns .column:first-of-type .inside {
    margin: 0 15px 0 0;
    padding: 30px 0 0 0;
  }
  .extracurricular .columns .column:last-of-type .inside {
    margin: 0 0 0 15px;
  }
  .extracurricular .cross-link .label {
    margin: 30px 0 0 30px;
  }
}
@media only screen and (max-width: 500px) {
  .extracurricular .columns {
    margin: 0;
  }
  .extracurricular .columns .column.width-50 {
    width: 100%;
  }
  .extracurricular .columns .column:first-of-type .inside {
    margin: 0 0 30px 0;
  }
  .extracurricular .columns .column:last-of-type .inside {
    margin: 0;
  }
  .extracurricular .cross-link {
    text-align: center;
  }
  .extracurricular .cross-link .label {
    margin: 30px auto 0 auto;
    display: inline-block;
    zoom: 1;
    *display: inline;
  }
}
/********************************************************************************************* 

x. Filters

*********************************************************************************************/
@media only screen and (max-width: 700px) {
  .filters {
    margin: 30px 0 -5px 0;
  }
}
/********************************************************************************************* 

x. Highlight

*********************************************************************************************/
@media only screen and (max-width: 800px) {
  .content .highlight {
    margin: 0 0 0 -30px;
  }
  .highlight {
    padding: 15px 30px;
  }
}
@media only screen and (max-width: 700px) {
  .content .highlight {
    margin: 0 0 0 -15px;
  }
  .highlight {
    padding: 15px;
  }
  .highlight.small {
    padding-right: 30px;
  }
  .highlight.small:after {
    right: 15px;
  }
}
@media only screen and (max-width: 500px) {
  .highlight.small {
    letter-spacing: normal;
  }
}
@media only screen and (max-width: 400px) {
  .highlight {
    line-height: 1.75em;
    padding: 5px 10px;
  }
}
/********************************************************************************************* 

x. Images

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .images.image-alignment-bottom .columns .column:first-of-type .inside,
.images.image-alignment-center .columns .column:first-of-type .inside,
.images.image-alignment-top .columns .column:first-of-type .inside {
    padding: 0 25px 0 0;
  }
  .images.image-alignment-bottom .columns .column:last-of-type .inside,
.images.image-alignment-center .columns .column:last-of-type .inside,
.images.image-alignment-top .columns .column:last-of-type .inside {
    padding: 0 0 0 25px;
  }
}
@media only screen and (max-width: 700px) {
  .images.image-alignment-bottom .columns .column:first-of-type .inside,
.images.image-alignment-center .columns .column:first-of-type .inside,
.images.image-alignment-top .columns .column:first-of-type .inside {
    padding: 0 15px 0 0;
  }
  .images.image-alignment-bottom .columns .column:last-of-type .inside,
.images.image-alignment-center .columns .column:last-of-type .inside,
.images.image-alignment-top .columns .column:last-of-type .inside {
    padding: 0 0 0 15px;
  }
  .images.image-alignment-offset .columns:first-of-type {
    margin: 0 0 30px 0;
  }
}
@media only screen and (max-width: 500px) {
  .images .columns {
    margin: 0 !important;
  }
  .images .columns .column {
    display: block !important;
  }
  .images .columns .column.width-50,
.images .columns .column.width-60 {
    width: 100%;
  }
  .images .columns .column:first-of-type {
    margin: 0 0 30px 0;
  }
  .images .columns .column .inside {
    padding: 0 !important;
  }
}
/********************************************************************************************* 

x. Image + Text

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .image-text .columns .column:first-of-type .content {
    padding: 0 50px 0 0;
  }
  .image-text .columns .column:last-of-type .content {
    padding: 0 0 0 50px;
  }
}
@media only screen and (max-width: 700px) {
  .image-text .columns .column:first-of-type .content {
    padding: 0 30px 0 0;
  }
  .image-text .columns .column:last-of-type .content {
    padding: 0 0 0 30px;
  }
}
@media only screen and (max-width: 500px) {
  .image-text .columns .column {
    display: block;
  }
  .image-text .columns .column.width-50 {
    width: 100%;
  }
  .image-text .columns .column:first-of-type {
    margin: 0 0 30px 0;
  }
  .image-text .columns .column:first-of-type .content,
.image-text .columns .column:last-of-type .content {
    padding: 0;
  }
}
/********************************************************************************************* 

x. Interactive Device

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .interactive-device .wrapper.small {
    margin-left: 100px;
  }
}
@media only screen and (max-width: 800px) {
  .interactive-device {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 700px) {
  .interactive-device {
    padding: 30px 0;
  }
}
@media only screen and (max-width: 600px) {
  .interactive-device .wrapper.small {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 500px) {
  .interactive-device .content {
    padding: 20px 0 0 0;
  }
}
/********************************************************************************************* 

x. Interactive Image

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .interactive-image .columns .column:first-of-type .content {
    padding: 0 50px 0 0;
  }
  .interactive-image .columns .column:last-of-type .content {
    padding: 0 0 0 50px;
  }
}
@media only screen and (max-width: 900px) {
  .interactive-image .image-wrapper .points .point:after,
.interactive-image .image-wrapper .points .point:before {
    width: 15px;
    height: 15px;
  }
}
@media only screen and (max-width: 700px) {
  .interactive-image .columns .column:first-of-type .content {
    padding: 0 30px 0 0;
  }
  .interactive-image .columns .column:last-of-type .content {
    padding: 0 0 0 30px;
  }
}
@media only screen and (max-width: 600px) {
  .interactive-image .columns .column {
    display: block;
  }
  .interactive-image .columns .column.width-50 {
    width: 100%;
  }
  .interactive-image .columns .column:first-of-type {
    margin: 0 0 30px 0;
  }
  .interactive-image .columns .column:first-of-type .content,
.interactive-image .columns .column:last-of-type .content {
    padding: 0;
  }
}
/********************************************************************************************* 

x. Logo

*********************************************************************************************/
@media only screen and (max-width: 1100px) {
  .logo .wrapper.small {
    width: 500px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 800px) {
  .logo {
    padding: 100px 0;
  }
}
@media only screen and (max-width: 700px) {
  .logo {
    padding: 60px 0;
  }
  .logo .wrapper.small {
    width: 300px;
  }
}
@media only screen and (max-width: 500px) {
  .logo .wrapper.small {
    width: 200px;
  }
}
/********************************************************************************************* 

x. Map

*********************************************************************************************/
@media only screen and (max-width: 800px) {
  #map {
    height: 600px;
  }
}
@media only screen and (max-width: 700px) {
  #map {
    height: 500px;
  }
}
@media only screen and (max-width: 400px) {
  #map {
    height: 400px;
  }
}
/********************************************************************************************* 

x. Margin + Padding

*********************************************************************************************/
@media only screen and (max-width: 700px) {
  .content ol,
.content ul,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 30px;
  }
}
/********************************************************************************************* 

x. Menu

*********************************************************************************************/
@media only screen and (max-width: 900px) {
  #menu .ppl-ppl {
    width: 70px;
  }
}
@media only screen and (max-width: 800px) {
  #menu .hamburger {
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 700px) {
  #menu .hamburger {
    top: 30px;
    right: 30px;
  }
  #menu .ppl-ppl {
    bottom: 30px;
    right: 30px;
  }
  #menu .social-media {
    bottom: 30px;
    left: 30px;
  }
}
@media only screen and (max-width: 500px) {
  #menu .navigation li {
    margin: 0 0 10px 0;
  }
  #menu .navigation li.small a {
    font-size: 0.875em;
  }
  #menu .ppl-ppl {
    display: none;
  }
}
/********************************************************************************************* 

x. News + Press

*********************************************************************************************/
@media only screen and (max-width: 1700px) {
  .news-press.grid .grid .item {
    width: 33.33%;
  }
}
@media only screen and (max-width: 1300px) {
  .news-press.grid .grid .item {
    width: 50%;
  }
}
@media only screen and (max-width: 700px) {
  .news-press.grid .grid .item {
    width: 100%;
  }
}
/********************************************************************************************* 

x. Not Found

*********************************************************************************************/
@media only screen and (max-width: 600px) {
  .not-found {
    padding: 100px 0;
  }
  .not-found .glitch,
.not-found .glitch svg {
    width: 400px;
    height: auto;
    margin: 0 auto 50px auto;
  }
}
@media only screen and (max-width: 500px) {
  .not-found .glitch,
.not-found .glitch svg {
    width: 300px;
    height: auto;
  }
}
@media only screen and (max-width: 400px) {
  .not-found .glitch,
.not-found .glitch svg {
    width: 200px;
    height: auto;
  }
}
/********************************************************************************************* 

x. Person
x. Project
x. Story

*********************************************************************************************/
@media only screen and (max-width: 800px) {
  .project .link .caption, .project .link .categories,
.person .link .caption, .person .link .categories,
.story .link .caption, .story .link .categories {
    font-size: 0.8em;
  }
}
@media only screen and (max-width: 400px) {
  .project .link .image,
.project .link .title,
.person .link .image,
.person .link .title,
.story .link .image,
.story .link .title {
    margin: 0 0 10px 0;
  }
}
/********************************************************************************************* 

x. Press
x. Related Projects

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .press .grid.masonry,
.press .grid.stacked,
.related-projects .grid.masonry {
    margin: -25px;
    padding: 50px 0 0 0;
  }
  .press .grid.masonry .item .inside,
.press .grid.stacked .item .inside,
.related-projects .grid.masonry .item .inside {
    margin: 25px;
  }
  .press .grid.masonry {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 1100px) {
  .press .grid.masonry .item,
.related-projects .grid.masonry .item {
    width: 50%;
  }
  .press .grid.masonry .item:nth-child(3),
.related-projects .grid.masonry .item:nth-child(3) {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  .press,
.related-projects {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 700px) {
  .press,
.related-projects {
    padding: 30px 0;
  }
  .press .grid.masonry,
.press .grid.stacked,
.related-projects .grid.masonry {
    margin: -15px;
    padding: 30px 0 0 0;
  }
  .press .grid.masonry .item .inside,
.press .grid.stacked .item .inside,
.related-projects .grid.masonry .item .inside {
    margin: 15px;
  }
  .press .grid.masonry {
    padding: 30px 0;
  }
  .press .grid.stacked .item .story .link {
    display: block;
  }
  .press .grid.stacked .item .story .content {
    width: auto;
  }
  .press .grid.stacked .item .story .image {
    width: 100%;
    aspect-ratio: 3/2;
  }
}
@media only screen and (max-width: 600px) {
  .project .link .content,
.press .grid.stacked .item .story .content,
.person .link .content, .story .link .content {
    padding: 30px;
  }
}
@media only screen and (max-width: 500px) {
  .press .grid.masonry,
.related-projects .grid.masonry {
    margin: -15px;
  }
  .press .grid.masonry .item,
.related-projects .grid.masonry .item {
    width: 100%;
  }
  .press .grid.masonry .item:nth-child(3),
.related-projects .grid.masonry .item:nth-child(3) {
    display: block;
  }
  .press .grid.masonry .item .inside,
.related-projects .grid.masonry .item .inside {
    margin: 15px;
  }
}
/********************************************************************************************* 

x. Projects

*********************************************************************************************/
@media only screen and (max-width: 1600px) {
  .projects.bottom .columns {
    margin: 50px 0 0 -50px;
  }
  .projects.top .columns {
    margin: 0 0 50px -50px;
  }
}
@media only screen and (max-width: 1400px) {
  .projects .columns .column:first-of-type .inside {
    margin: 0 50px 0 0;
  }
  .projects .columns .column:last-of-type .inside {
    margin: 0 0 0 50px;
  }
}
@media only screen and (max-width: 1300px) {
  .projects .columns .column:first-of-type .inside {
    margin: 0 25px 0 0;
  }
  .projects .columns .column:last-of-type .inside {
    margin: 0 0 0 25px;
  }
}
@media only screen and (max-width: 800px) {
  .projects .columns .column:last-of-type .inside {
    padding: 200px 0 0 0;
  }
  .projects .content svg {
    width: 40px;
    height: auto;
  }
}
@media only screen and (max-width: 700px) {
  .projects.bottom .columns {
    margin: 30px 0 0 -30px;
  }
  .projects.top .columns {
    margin: 0 0 30px -30px;
  }
  .projects .columns .column:first-of-type .inside {
    margin: 0 15px 0 0;
  }
  .projects .columns .column:last-of-type .inside {
    margin: 0 0 0 15px;
  }
  .projects .content {
    margin: 60px 0 0 0;
  }
}
@media only screen and (max-width: 600px) {
  .projects.bottom .columns {
    margin: 30px 0 0 0;
  }
  .projects.top .columns {
    margin: 0 0 30px 0;
  }
  .projects .columns .column:last-of-type .inside {
    padding: 0;
  }
  .projects .content {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  .projects .columns .column.width-50 {
    width: 100%;
  }
  .projects .columns .column:first-of-type .inside {
    margin: 0 0 30px 0;
  }
  .projects .columns .column:last-of-type .inside {
    margin: 0;
  }
}
/********************************************************************************************* 

x. Services

*********************************************************************************************/
@media only screen and (max-width: 800px) {
  .page-services .content p .icon svg {
    width: 70px;
    height: auto;
  }
  #services .expandable-content .content {
    font-size: 0.867em;
  }
}
@media only screen and (max-width: 700px) {
  #services .expandable-content .content {
    margin: 0 0 30px 0;
  }
  #services .expandable-content .title .link {
    text-align: left;
    padding: 30px 30px 30px 0;
  }
}
/********************************************************************************************* 

x. Single Page Navigation

*********************************************************************************************/
@media only screen and (max-width: 1200px) {
  .single-page-navigation {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 800px) {
  .single-page-navigation .navigation li {
    margin: 0 30px;
  }
  .single-page-navigation .navigation li a {
    font-size: 0.867em;
  }
}
@media only screen and (max-width: 700px) {
  .single-page-navigation .navigation li {
    margin: 0 15px;
  }
}
@media only screen and (max-width: 600px) {
  .single-page-navigation-wrapper {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  .single-page-navigation .navigation li a {
    letter-spacing: normal;
  }
}
/********************************************************************************************* 

x. Slick

*********************************************************************************************/
@media only screen and (max-width: 700px) {
  .slick-dots li span {
    width: 8px;
    height: 8px;
  }
}
/********************************************************************************************* 

x. Social Media

*********************************************************************************************/
@media only screen and (max-width: 900px) {
  .social-media a {
    height: 25px;
  }
}
/********************************************************************************************* 

x. Specialties

*********************************************************************************************/
@media only screen and (max-width: 800px) {
  .specialties {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 700px) {
  .specialties {
    padding: 30px 0;
  }
}
/********************************************************************************************* 

x. Team

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .team .grid {
    margin: 0 -25px;
  }
  .team .grid .item .inside {
    margin: 0 25px 50px 25px;
  }
}
@media only screen and (max-width: 1000px) {
  .team .grid .full-information:last-child .inside {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 900px) {
  .team .grid {
    padding: 0;
  }
  .team .grid .full-information {
    margin: 0 0 50px 0;
  }
  .team .grid .item.offset {
    top: 0;
  }
  .team .grid .item.width-33 {
    width: 50%;
  }
}
@media only screen and (max-width: 800px) {
  .team .grid .full-information .inside {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 700px) {
  .team .grid {
    margin: 0 -15px;
  }
  .team .grid .item .inside {
    margin: 0 15px 30px 15px;
  }
  .team .grid .full-information {
    margin: 0 0 30px 0;
  }
  .team .grid .full-information .inside {
    padding: 30px 0;
  }
}
@media only screen and (max-width: 500px) {
  .team {
    padding: 0 0 60px 0;
  }
  .team .grid {
    opacity: 1;
  }
  .team .grid .item.width-33 {
    width: 100%;
  }
}
/********************************************************************************************* 

x. Telephone

*********************************************************************************************/
@media only screen and (max-width: 800px) {
  .telephone {
    width: 300px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    padding: 10px;
  }
  .telephone .address-bar {
    padding: 30px 10px 10px 10px;
  }
  .telephone iframe {
    height: 500px;
  }
  .telephone .speaker-camera svg {
    width: 150px;
    height: auto;
  }
}
/********************************************************************************************* 

x. Text

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .text .columns {
    margin: 50px -50px 0 -50px;
  }
  .text .columns .inside {
    padding: 0 50px;
  }
  .text .cross-link .image {
    height: 650px;
  }
}
@media only screen and (max-width: 1200px) {
  .text .cross-link .image {
    height: 600px;
  }
}
@media only screen and (max-width: 1100px) {
  .text .cross-link .label {
    bottom: 90px;
  }
}
@media only screen and (max-width: 900px) {
  .text .cross-link .label {
    right: calc(100% - 150px);
  }
}
@media only screen and (max-width: 800px) {
  .text.padding {
    padding: 50px 0;
  }
  .text .columns {
    margin: 50px -25px 0 -25px;
  }
  .text .columns .inside {
    padding: 0 25px;
  }
  .text .cross-link {
    top: -100px;
  }
  .home .text {
    padding: 0 0 50px 0;
  }
}
@media only screen and (max-width: 700px) {
  .text.padding {
    padding: 30px 0;
  }
  .text .columns {
    margin: 30px -15px 0 -15px;
  }
  .text .columns .inside {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 600px) {
  .home .text {
    padding: 0 0 30px 0;
  }
  .text .cross-link {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  .home .text {
    padding: 0 0 10px 0;
  }
  .text .columns .column.width-35,
.text .columns .column.width-65 {
    width: 100%;
  }
  .text .columns .column:first-of-type {
    margin: 0 0 30px 0;
  }
}
/********************************************************************************************* 

x. Thank You

*********************************************************************************************/
@media only screen and (max-width: 700px) {
  #thank-you .close {
    top: 30px;
    right: 30px;
  }
}
/********************************************************************************************* 

x. Underline

*********************************************************************************************/
@media only screen and (max-width: 600px) {
  .underline {
    text-shadow: -1px -1px white, -1px 1px white, 1px -1px white, 1px 1px white;
  }
}
/********************************************************************************************* 

x. Work

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
  .work .grid {
    margin: 0 -25px;
  }
  .work .grid .item .inside {
    margin: 0 25px 50px 25px;
  }
}
@media only screen and (max-width: 900px) {
  .work .grid .item.width-33 {
    width: 50%;
  }
}
@media only screen and (max-width: 700px) {
  .work .grid {
    margin: 0 -15px;
  }
  .work .grid .item .inside {
    margin: 0 15px 30px 15px;
  }
}
@media only screen and (max-width: 500px) {
  .work .grid {
    opacity: 1;
  }
  .work .grid .item.width-33 {
    width: 100%;
  }
}
/********************************************************************************************* 

x. General Form

*********************************************************************************************/
@media only screen and (max-width: 1024px) {
  /*
  input,
  textarea {
      border-radius: 0;
      -webkit-appearance: none;
  }
  */
}
/********************************************************************************************* 

x. WordPress Core

*********************************************************************************************/
@media only screen and (max-width: 700px) {
  .aligncenter,
.alignleft,
.alignnone,
.alignright {
    margin: 0 auto 30px auto;
  }
  .wp-caption p.wp-caption-text {
    margin: -20px 0 0 0;
  }
}

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