@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=8e5f73b2-f789-4701-be98-cfcbd6919d7c&fontids=724362,724380,724386");
@font-face {
  font-family: "AvenirReg";
  src: url("/css/Fonts/724362/7a1b7ae7-5c29-481f-83ac-652e932c5509.eot?#iefix");
  src: url("/css/Fonts/724362/7a1b7ae7-5c29-481f-83ac-652e932c5509.eot?#iefix") format("eot"), url("/css/Fonts/724362/bb590848-4012-46d6-a8d5-48c9893a176b.woff2") format("woff2"), url("/css/Fonts/724362/3a42a252-67ff-4186-88cf-762f56719ca1.woff") format("woff"), url("/css/Fonts/724362/dbc39ae3-2636-4653-a23e-8938bce2cf51.ttf") format("truetype"), url("/css/Fonts/724362/8e46b6cb-85f2-4400-a9d8-7cbd8ed30dd8.svg#8e46b6cb-85f2-4400-a9d8-7cbd8ed30dd8") format("svg"); }
@font-face {
  font-family: "AvenirBold";
  src: url("/css/Fonts/724380/51d861aa-f9b4-4afb-a019-d7d155c21072.eot?#iefix");
  src: url("/css/Fonts/724380/51d861aa-f9b4-4afb-a019-d7d155c21072.eot?#iefix") format("eot"), url("Fonts/724380/b729a5ee-0221-40db-9a76-7b9e9b747f65.woff2") format("woff2"), url("/css/Fonts/724380/51a56502-44d2-4d70-808f-fc822da45209.woff") format("woff"), url("/css/Fonts/724380/11eb4d83-a3b4-4ab8-a47c-ef9173d239fc.ttf") format("truetype"), url("/css/Fonts/724380/7258c0e3-4850-4db8-b45f-a8f81d1bf6ba.svg#7258c0e3-4850-4db8-b45f-a8f81d1bf6ba") format("svg"); }
@font-face {
  font-family: "AvenirHeavy";
  src: url("/css/Fonts/724386/439d65cd-9d01-42eb-bcbc-7bbc2b558e89.eot?#iefix");
  src: url("/css/Fonts/724386/439d65cd-9d01-42eb-bcbc-7bbc2b558e89.eot?#iefix") format("eot"), url("Fonts/724386/74180223-99f0-4cd7-b823-0e6f0952054c.woff2") format("woff2"), url("/css/Fonts/724386/8d2e93bb-cf4f-42f3-9637-a2df4c487681.woff") format("woff"), url("/css/Fonts/724386/97306e2b-5812-4475-bace-91dd3e85ba9b.ttf") format("truetype"), url("/css/Fonts/724386/3a43cae9-bc30-43d9-b2f9-68bb57667bb7.svg#3a43cae9-bc30-43d9-b2f9-68bb57667bb7") format("svg"); }
/* Responsive Mixins
   see: http://jakearchibald.github.com/sass-ie
------------------------------------------------ */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block; }

audio,
canvas,
video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

html {
  background: #fff;
  color: #000;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

html,
button,
input,
select,
textarea {
  font-family: sans-serif; }

body {
  margin: 0; }

a {
  background: transparent; }
  a:focus {
    outline: thin dotted; }
  a:hover, a:active {
    outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

q:before,
q:after {
  content: '';
  content: none; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0;
  white-space: normal; }

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline; }

button,
input {
  line-height: normal; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
input[disabled] {
  cursor: default; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

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

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html {
  box-sizing: border-box; }

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

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  background: #fcfcf5;
  font: normal normal 18px/1.4 "Miller Text", "Times New Roman", Times, serif;
  color: #173851; }
  body.overflow {
    overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

h1, .title, .header {
  font: normal 60px/62px "AvenirHeavy", Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
  padding-bottom: 20px; }
  @media screen and (max-width: 863px) {
    h1, .title, .header {
      font-size: 30px;
      line-height: 39px;
      padding-bottom: 10px; } }

h2 {
  font: normal 46px/50px "AvenirHeavy", Helvetica, Arial, sans-serif;
  padding: 0 0 20px 0; }

h3 {
  font: normal 30px/34px "AvenirHeavy", Helvetica, Arial, sans-serif;
  padding: 0 0 10px 0;
  letter-spacing: 1px; }
  @media screen and (max-width: 863px) {
    h3 {
      font-size: 18px;
      line-height: 24px; } }

h4 {
  font: 14px/20px "AvenirBold", Helvetica, Arial, sans-serif;
  font: bold 16px/34px "Miller Text", "Times New Roman", Times, serif;
  color: #af895f; }
  h4.regular {
    font-weight: normal;
    line-height: 24px;
    padding: 8px 0; }

h5 {
  font: 16px/34px "Miller Text", "Times New Roman", Times, serif;
  margin: 20px 0 10px 0;
  color: #af895f; }
  h5 a {
    color: #999;
    text-decoration: none; }

p {
  margin: 12px 0; }

@media screen and (max-width: 863px) {
  .nomobile {
    display: none; } }
.casestudy h3 {
  font: 30px/34px "AvenirBold", Helvetica, Arial, sans-serif;
  padding: 0 0 10px 0; }

.flag {
  color: #d71920;
  background: #173851;
  font: italic bold 14px/20px "Miller Text", "Times New Roman", Times, serif;
  padding: 10px 15px 10px 20px;
  text-decoration: none;
  pointer-events: auto;
  margin: 0 10px 0 -20px; }

h6 .flag {
  display: none; }

.tldr {
  position: absolute;
  left: 0;
  z-index: 99;
  top: 187px;
  color: #FFF;
  right: 0;
  bottom: -10px;
  pointer-events: none; }
  .tldr h6 {
    max-width: 650px;
    font: 14px/18px "AvenirReg", Helvetica, Arial, sans-serif;
    padding: 20px 0 17px 0; }
  .tldr h1 {
    max-width: 700px; }
  .tldr p {
    max-width: 700px;
    font-size: 24px; }
  .tldr .btn {
    display: inline-block;
    margin: 20px 0; }
  .tldr.on {
    pointer-events: auto; }
  .tldr .flag {
    display: block;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0; }
  .tldr article {
    width: 100%;
    height: 100%;
    overflow: scroll;
    pointer-events: auto;
    margin-top: -10px;
    margin-left: -100%;
    background: #173851;
    transition: all 0.2s ease; }
    .tldr article .close {
      position: absolute;
      top: 10px;
      left: 0;
      opacity: 0; }
    .tldr article .block {
      max-width: 940px;
      margin: 0 auto; }
    .tldr article.on {
      margin-left: 0; }
      .tldr article.on .close {
        left: auto;
        opacity: 1; }
  @media screen and (max-width: 863px) {
    .tldr {
      top: 133px; }
      .tldr p {
        font-size: 18px; }
      .tldr article {
        padding: 0 20px; } }

.btn {
  position: relative;
  border: 2px #f63440 solid;
  padding: 12px 58px 10px 16px;
  color: #f63440;
  font: bold italic 14px/22px "Miller Text", "Times New Roman", Times, serif;
  text-decoration: none; }
  .btn:before {
    content: '';
    position: absolute;
    right: 10px;
    top: 19px;
    width: 36px;
    border-bottom: 1px #f63440 solid; }
  .btn:hover {
    background: #f63440;
    color: #fcfcf5; }
    .btn:hover:before {
      border-bottom-color: #fcfcf5; }

section.bloghed {
  padding-bottom: 240px;
  background-repeat: no-repeat;
  background-position: right bottom;
  border-bottom: 1px #999999 solid; }
  section.bloghed.primary h5 {
    margin-bottom: 30px; }
  section.bloghed h4.regular {
    margin: 0 0 -10px 0; }
  @media screen and (max-width: 863px) {
    section.bloghed {
      background-size: 100% auto;
      padding-bottom: 200px; }
      section.bloghed.primary h5 {
        margin-bottom: 15px; } }
  @media screen and (max-width: 520px) {
    section.bloghed {
      padding-bottom: 140px; } }

.blogindex {
  text-align: center;
  margin-bottom: 75px; }
  .blogindex .cats {
    margin-bottom: 45px; }
  .blogindex .solo {
    border-top: 1px #999999 solid;
    padding: 40px 0 60px 0; }
    .blogindex .solo.first {
      border-top: 0; }
  .blogindex h4 {
    margin-bottom: 30px; }
  .blogindex h5 {
    margin-top: 10px; }
  .blogindex .paginate {
    float: left;
    display: block;
    margin-right: 2.27273%;
    width: 100%;
    padding-top: 30px; }
    .blogindex .paginate:last-child {
      margin-right: 0; }
    .blogindex .paginate a {
      text-decoration: none;
      font: bold italic 14px/22px "Miller Text", "Times New Roman", Times, serif;
      padding: 4px 0;
      border-bottom: 1px #173851 solid; }
  @media screen and (max-width: 863px) {
    .blogindex .cats {
      margin-bottom: 0; }
    .blogindex h3 {
      font: 24px/30px "AvenirHeavy", Helvetica, Arial, sans-serif; } }

.how .triangle2 {
  position: absolute;
  left: -110px;
  top: 0; }
.how.short .subcat {
  padding: 0 6% 65px 0; }
.how .subcat {
  float: left;
  width: 25%;
  padding: 32% 6% 20px 0;
  position: relative;
  margin-top: 40px; }
  .how .subcat.no-mobile {
    padding: 0 6% 90px 0; }
  .how .subcat img.arrow {
    position: absolute;
    top: 100px;
    left: -65px;
    width: 93px;
    height: 65px; }
  .how .subcat:first-child {
    background: none; }
  .how .subcat svg {
    height: 45px;
    width: 45px; }
  .how .subcat path, .how .subcat polygon, .how .subcat rect, .how .subcat circle, .how .subcat ellipse {
    fill: #173851; }
  .how .subcat h3 {
    font: 16px/22px "AvenirBold", Helvetica, Arial, sans-serif;
    margin: 10px 0 0 0;
    letter-spacing: 0; }
  .how .subcat h4 {
    color: #173851;
    font: italic bold 22px/22px "Miller Text", "Times New Roman", Times, serif;
    position: absolute;
    top: 0; }
  .how .subcat img {
    position: absolute;
    top: 40px;
    width: 70%; }
.how p {
  font: 16px/22px "Miller Text", "Times New Roman", Times, serif;
  color: #515151; }
@media screen and (max-width: 863px) {
  .how h3 {
    font: 30px/28px "AvenirHeavy", Helvetica, Arial, sans-serif;
    margin-top: 40px; }
  .how.short .subcat {
    padding: 0 0 20px 0; }
  .how .subcat {
    width: 100%;
    border-bottom: 1px #999999 solid;
    padding: 0 0 20px 0; }
    .how .subcat.last {
      border-bottom: 0; }
    .how .subcat h4 {
      display: none; }
    .how .subcat img {
      position: relative;
      top: auto;
      display: block;
      margin: 0 0 20px 0; }
  .how img.arrow, .how .triangle2 {
    display: none; } }

.criteria {
  text-align: center; }
  .criteria h3 {
    border-bottom: 1px #af895f solid;
    padding-bottom: 33px; }
  .criteria .solo {
    border-bottom: 1px #af895f solid;
    padding: 14px 20px; }

.shoes {
  padding: 0 0 85px 0;
  margin-bottom: 100px;
  text-align: center;
  border-bottom: 1px #515151 solid; }
  .shoes h3 {
    margin-bottom: 0; }
  .shoes a {
    background-position: center bottom 2px;
    background-repeat: no-repeat;
    text-decoration: none;
    display: block;
    height: 160px;
    padding-top: 160px;
    position: relative; }
    .shoes a:hover span {
      background-position: center bottom 15px; }
  .shoes span {
    display: block;
    position: absolute;
    width: 100%;
    background-position: center bottom 2px;
    background-repeat: no-repeat;
    text-decoration: none;
    height: 160px;
    padding-top: 160px;
    bottom: 0; }
  .shoes img {
    display: inline-block;
    transition: all 0.1s ease; }
  .shoes div {
    display: inline-block;
    vertical-align: bottom;
    height: 200px;
    width: 24%; }
    .shoes div:hover img {
      margin: -5px 0 5px 0; }
  .shoes p {
    font: 12px/20px "AvenirBold", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #515151;
    margin: 5px 0; }
  @media screen and (max-width: 863px) {
    .shoes {
      margin-bottom: 50px;
      padding: 0 0 50px 0; }
      .shoes h3 {
        margin-top: 40px;
        margin-bottom: 20px;
        font: 24px/30px "AvenirHeavy", Helvetica, Arial, sans-serif; }
      .shoes div {
        width: 100%;
        padding: 30px 0 0; }
      .shoes p {
        margin-top: 30px; } }

.who h3 {
  text-align: center; }
.who .quote em {
  display: block;
  font: 16px/30px "AvenirReg", Helvetica, Arial, sans-serif;
  margin-top: 20px; }
  .who .quote em:before {
    content: '';
    float: left;
    width: 35px;
    border-bottom: 1px #FFF solid;
    display: block;
    height: 15px;
    margin-right: 15px; }
.who .quote b {
  font: italic normal 100px/1px "Miller Text", "Times New Roman", Times, serif;
  display: block;
  margin: 45px 0 0 -10px; }

.serviceindex.brand-comms .nine p {
  bottom: 180px; }
.serviceindex .nine {
  position: relative;
  height: 666px; }
  .serviceindex .nine img {
    position: absolute;
    right: -90px;
    top: 0;
    width: auto;
    max-width: none; }
.serviceindex .five {
  position: relative;
  z-index: 1;
  margin-left: 6.81818%; }
  .serviceindex .five path, .serviceindex .five polygon, .serviceindex .five rect, .serviceindex .five circle, .serviceindex .five ellipse {
    fill: #173851; }
  .serviceindex .five svg {
    display: block;
    margin: 85px 0 15px 0;
    width: 45px; }
  .serviceindex .five p {
    margin: 0;
    padding: 6px 0 12px 0;
    font: 16px/22px "Miller Text", "Times New Roman", Times, serif;
    color: #515151; }
    .serviceindex .five p.to300 {
      font: italic bold 14px/28px "Miller Text", "Times New Roman", Times, serif;
      padding: 6px 0 30px 0; }
      .serviceindex .five p.to300 a {
        text-decoration: none;
        color: #515151;
        padding: 0 0 1px 0;
        white-space: nowrap;
        transition: color 0.1s ease; }
        .serviceindex .five p.to300 a:hover {
          color: #d71920;
          border-bottom: 1px #d71920 solid; }
@media screen and (max-width: 863px) {
  .serviceindex.brand-comms .nine p {
    bottom: 0; }
  .serviceindex .nine {
    height: auto;
    width: 106%;
    margin: 0 -20px;
    overflow: hidden; }
    .serviceindex .nine img.mobileonly {
      position: relative;
      width: auto !important;
      max-width: 100%;
      height: auto;
      right: auto; }
    .serviceindex .nine p {
      display: none; }
  .serviceindex .five {
    margin-left: 0%;
    margin-bottom: 40px; }
    .serviceindex .five h3 {
      font-size: 30px;
      line-height: 22px; }
    .serviceindex .five svg {
      margin: 20px 0 15px 0; } }

.where {
  padding: 100px 0 150px; }
  .where h3 {
    text-align: center;
    margin-bottom: 40px; }
  .where h4 {
    color: #173851;
    font: normal normal 24px/30px "Miller Text", "Times New Roman", Times, serif;
    margin-bottom: 40px; }
  .where a {
    text-decoration: none; }
  .where p {
    font: normal normal 16px/22px "Miller Text", "Times New Roman", Times, serif; }
  .where article {
    background: #f1f1e2 url("https://statesofmatter.com/img/about/map.png") no-repeat;
    background-size: cover;
    height: 300px;
    padding: 87px 0 0 93px; }
  @media screen and (max-width: 863px) {
    .where article {
      height: auto;
      padding: 40px 10px 40px 34px; } }

.mobileonly {
  display: none !important; }
  @media screen and (max-width: 863px) {
    .mobileonly {
      display: block !important; } }

@media screen and (max-width: 863px) {
  .nomobile {
    display: none !important; } }
figcaption {
  color: #515151;
  font: italic 16px/22px "Miller Text", "Times New Roman", Times, serif; }

body.level300 section.video {
  margin-bottom: 0; }
body.level300 .quotes {
  padding-bottom: 20px; }
body.level300 form span li {
  border: 0; }
body.level300 .filters form ul {
  width: 100%;
  font-size: 16px;
  line-height: 18px; }
  body.level300 .filters form ul a {
    color: #f1f1e2;
    font-family: "AvenirReg", Helvetica, Arial, sans-serif; }
  body.level300 .filters form ul strong {
    padding: 6px 0 12px;
    display: block;
    border-bottom: 1px #666 solid; }
    body.level300 .filters form ul strong a {
      color: #FFF;
      font-size: 20px;
      font-family: "AvenirBold", Helvetica, Arial, sans-serif; }
body.level300 .explainers {
  margin-bottom: 20px; }
  body.level300 .explainers p, body.level300 .explainers h3 {
    font-size: 16px;
    color: #515151; }
  body.level300 .explainers h3 {
    font-family: "AvenirBold", Helvetica, Arial, sans-serif;
    letter-spacing: 0;
    color: #173851;
    padding: 0; }
body.level300 .shoes {
  border-bottom: 0;
  margin-bottom: 30px; }
body.level300 .quotes h3 {
  margin: 10px 0 60px 0; }
body.level300 .tinted > h3 {
  margin-bottom: 35px; }
body.level300 .how .subcat {
  padding-top: 240px;
  margin-top: 0; }
  body.level300 .how .subcat h3 {
    font-size: 20px; }
  body.level300 .how .subcat h5 {
    font: 16px/22px "AvenirBold", Helvetica, Arial, sans-serif;
    color: #173851;
    margin-top: 5px; }
    body.level300 .how .subcat h5.border {
      border-top: 1px #173851 solid;
      padding-top: 20px; }
  body.level300 .how .subcat ul {
    margin: 20px 0 20px 20px;
    font-size: 16px;
    color: #515151; }
  body.level300 .how .subcat li {
    margin-bottom: 10px; }
body.level300 .success {
  margin-bottom: 0;
  margin-top: 70px; }
body.level300 .success h2 {
  padding-bottom: 40px;
  font-size: 28px;
  line-height: 34px; }
body.level300 .how .subcat img {
  height: 180px;
  width: auto; }
body.level300 section.whywho {
  padding-bottom: 40px; }
  body.level300 section.whywho ul {
    color: #515151; }
  body.level300 section.whywho p, body.level300 section.whywho li {
    font-size: 16px;
    line-height: 22px;
    color: #515151;
    margin: 12px 0; }
body.level300 section.primary aside span {
  width: 100%;
  line-height: 32px; }
body.level300 section.primary {
  padding-bottom: 50px; }
  body.level300 section.primary aside {
    padding-top: 30px;
    padding-left: 0; }
    body.level300 section.primary aside a {
      height: auto; }
  body.level300 section.primary.short form {
    position: relative;
    width: 100%;
    bottom: auto; }
  body.level300 section.primary svg {
    margin: 50px auto 0;
    display: block;
    width: 120px;
    height: 120px; }
  body.level300 section.primary path, body.level300 section.primary polygon, body.level300 section.primary rect, body.level300 section.primary circle, body.level300 section.primary ellipse {
    fill: #af895f; }
@media screen and (max-width: 863px) {
  body.level300 .success h2 {
    padding-top: 20px;
    font-size: 24px;
    line-height: 30px; }
  body.level300 section.whywho .benefits ul {
    margin-left: 20px; }
  body.level300 section.whywho h3 {
    font-size: 24px; }
  body.level300 .quotes h3 {
    font-size: 24px;
    line-height: 30px;
    margin: 0;
    padding: 0 0 20px 0; }
  body.level300 .shoes {
    padding-bottom: 220px; }
  body.level300 .shoes a {
    height: 120px;
    padding-top: 100px; }
  body.level300 .shoes h3 {
    margin-bottom: 0;
    padding-bottom: 0; }
  body.level300 .shoes div {
    padding: 0;
    height: 170px; }
  body.level300 .how .subcat {
    padding-top: 20px;
    border-bottom: 0; }
  body.level300 .work p {
    font-size: 16px; }
  body.level300 section.primary {
    padding-bottom: 0; }
    body.level300 section.primary aside {
      padding-top: 10px;
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 86.36364%; }
      body.level300 section.primary aside:last-child {
        margin-right: 0; }
    body.level300 section.primary.short form {
      position: absolute;
      width: 100%;
      bottom: 0; }
    body.level300 section.primary svg {
      margin: 0 0 50px;
      display: block;
      width: 120px;
      height: 140px; }
    body.level300 section.primary path, body.level300 section.primary polygon, body.level300 section.primary rect, body.level300 section.primary circle, body.level300 section.primary ellipse {
      fill: #af895f; } }

.buffer {
  margin-top: 10px;
  margin-bottom: 70px; }

.share {
  color: #af895f;
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 72.72727%;
  margin-left: 13.63636%;
  margin-bottom: 20px; }
  .share:last-child {
    margin-right: 0; }
  .share a {
    color: #af895f;
    padding: 0 10px 0 0; }
    .share a path, .share a rect {
      fill: #af895f; }
    .share a:hover path, .share a:hover rect {
      fill: #173851; }
  .share svg {
    width: 15px;
    height: 15px;
    margin-top: -3px;
    display: inline-block;
    vertical-align: middle; }
  .share em {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    font-weight: bold;
    position: relative;
    margin-left: 8px; }
    .share em:after {
      display: inline-block;
      width: 70px;
      border-bottom: 1px #af895f solid;
      margin-left: 15px;
      content: '';
      vertical-align: middle; }

.signup {
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(23, 56, 81, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  height: 100vh; }
  .signup section {
    background: #173851;
    width: 500px;
    padding: 65px 40px 40px;
    text-align: center;
    color: #FFF;
    position: relative; }
    .signup section p {
      font: 15px/1.2 "AvenirReg", Helvetica, Arial, sans-serif; }
    .signup section h3 {
      font: italic bold 30px/1 "Miller Text", "Times New Roman", Times, serif; }
    .signup section .close {
      position: absolute; }
    .signup section form fieldset {
      border: 0; }
    .signup section form input {
      background: #062336;
      width: 100%;
      font: 16px/1 "AvenirReg", Helvetica, Arial, sans-serif;
      padding: 10px;
      border: 0; }
    .signup section form button {
      display: none; }
  .signup.open {
    opacity: 1;
    pointer-events: auto; }

body.people {
  padding-top: 700px; }
  body.people .curtain {
    width: 223px;
    height: 77px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -111px; }
  body.people h3 {
    text-align: center; }
  body.people .tinted {
    margin-bottom: 60px; }
  body.people .tinted img {
    width: 100%; }
  body.people .grid h3 {
    padding-top: 0;
    padding-bottom: 50px; }
  body.people .ataglance h3, body.people .group h3 {
    text-align: left; }
  body.people .group.collapsed > div div a {
    background-color: #f1f1e2; }
  body.people header.sticky a {
    color: #fcfcf5; }
  body.people header a.hire {
    background: transparent; }
  body.people header nav a.logo path {
    fill: #fcfcf5; }
  body.people .bleed {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 700px;
    color: #FFF;
    padding: 90px 60px 40px; }
    body.people .bleed p {
      font-size: 20px;
      line-height: 28px; }
    body.people .bleed section.primary article {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 59.09091%; }
      body.people .bleed section.primary article:last-child {
        margin-right: 0; }
  body.people header, body.people header.sticky section {
    background: transparent; }
  body.people header.sticky.opaque section {
    background: #fcfcf5; }
    body.people header.sticky.opaque section a {
      color: #515151; }
    body.people header.sticky.opaque section a.hire {
      background: #173851;
      color: #d71920; }
      body.people header.sticky.opaque section a.hire:hover {
        color: #fcfcf5; }
    body.people header.sticky.opaque section a.logo path {
      fill: #173851; }
  @media screen and (max-width: 863px) {
    body.people {
      padding-top: 0; }
      body.people .tinted {
        margin-bottom: 40px; }
      body.people h3 {
        text-align: left;
        font-size: 24px; }
      body.people .grid h3 {
        padding-top: 0;
        padding-bottom: 25px; }
      body.people .bleed {
        height: auto;
        background: transparent !important;
        color: #515151;
        padding: 0;
        position: relative;
        top: auto;
        left: auto;
        width: auto; }
        body.people .bleed h1 {
          color: #173851; }
        body.people .bleed .curtain {
          display: none; }
        body.people .bleed p {
          font-size: 16px;
          line-height: 22px; }
        body.people .bleed img.mobileonly {
          border-radius: 100%;
          margin: 10px auto 30px;
          display: block; }
        body.people .bleed section.primary article {
          float: left;
          display: block;
          margin-right: 2.27273%;
          width: 100%; }
          body.people .bleed section.primary article:last-child {
            margin-right: 0; }
      body.people header.sticky section {
        background: #173851; } }

.quotes {
  padding-top: 50px;
  padding-bottom: 65px; }
  .quotes strong {
    font-size: 150px;
    display: inline-block;
    line-height: 20px;
    margin-bottom: -25px;
    margin-right: 40px;
    font-weight: normal;
    vertical-align: bottom; }
  .quotes h3 {
    text-align: center;
    margin: 70px 0 50px 0; }
  .quotes .carousel {
    color: #173851;
    text-align: center;
    font: italic bold 30px/40px "Miller Text", "Times New Roman", Times, serif; }
    .quotes .carousel p {
      max-width: 750px;
      padding: 30px 0;
      margin: 0 auto; }
  @media screen and (max-width: 863px) {
    .quotes {
      padding: 40px 0; }
      .quotes h3 {
        margin: 0;
        text-align: center !important; }
      .quotes strong {
        display: block;
        line-height: 150px;
        margin: 0 0 -70px 0; }
      .quotes .carousel p {
        padding: 0 50px;
        font: italic bold 30px/40px "Miller Text", "Times New Roman", Times, serif; } }

.ataglance .meta {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 25%; }
  .ataglance .meta:last-child {
    margin-right: 0; }
  .ataglance .meta p img {
    height: 20px;
    width: 20px; }
  .ataglance .meta p a {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #173851;
    border-radius: 100%;
    text-indent: -99999px;
    margin-right: 8px; }
    .ataglance .meta p a.twitter {
      background: #173851 url("https://statesofmatter.com/svg/twitter.svg") no-repeat center center;
      background-size: 15px 15px; }
    .ataglance .meta p a.linkedin {
      background: #173851 url("https://statesofmatter.com/svg/linkedin.svg") no-repeat center center;
      background-size: 15px 15px; }
.ataglance .block {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 72.72727%; }
  .ataglance .block:last-child {
    margin-right: 0; }
  .ataglance .block ul {
    list-style: none;
    margin: 0 0 70px 0;
    padding: 0;
    font: 16px/24px "AvenirReg", Helvetica, Arial, sans-serif; }
  .ataglance .block li {
    margin: 0 0 10px 0; }
  .ataglance .block strong {
    font-weight: normal;
    font-family: "AvenirHeavy", Helvetica, Arial, sans-serif;
    float: left;
    width: 100px;
    display: block;
    float: left;
    display: block;
    margin-right: 2.27273%;
    width: 28.40909%; }
    .ataglance .block strong:last-child {
      margin-right: 0; }
@media screen and (max-width: 863px) {
  .ataglance .block, .ataglance .meta, .ataglance .block strong {
    float: left;
    display: block;
    margin-right: 2.27273%;
    width: 100%; }
    .ataglance .block:last-child, .ataglance .meta:last-child, .ataglance .block strong:last-child {
      margin-right: 0; }
  .ataglance .meta {
    margin-bottom: 20px; }
    .ataglance .meta h3 {
      font-size: 24px; }
  .ataglance .block ul {
    margin: 0 0 40px 0; } }

.blogmeat {
  position: relative; }
  .blogmeat .meta {
    margin-bottom: 30px; }
    .blogmeat .meta .author {
      max-width: 940px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 40px; }
      .blogmeat .meta .author::after {
        clear: both;
        content: "";
        display: table; }
      .blogmeat .meta .author h4 {
        font-style: italic; }
    .blogmeat .meta h3 {
      padding: 0; }
    .blogmeat .meta p {
      font-size: 16px;
      margin: 10px 0; }
    .blogmeat .meta h3, .blogmeat .meta h3 a {
      color: #173851; }
    .blogmeat .meta .authorphoto {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 18.18182%; }
      .blogmeat .meta .authorphoto:last-child {
        margin-right: 0; }
      .blogmeat .meta .authorphoto img {
        border-radius: 100%; }
    .blogmeat .meta .authorbio {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 79.54545%; }
      .blogmeat .meta .authorbio:last-child {
        margin-right: 0; }
    .blogmeat .meta a {
      color: #af895f;
      font-weight: bold;
      text-decoration: none; }
  .blogmeat .quote {
    margin-top: 30px; }
    .blogmeat .quote cite {
      padding-bottom: 0; }
  .blogmeat figure img {
    width: 100%;
    height: auto; }
  .blogmeat .imageLeft figure {
    width: 360px;
    margin: 30px 40px 20px -11.36364%;
    float: left; }
  .blogmeat .imageRight figure {
    width: 360px;
    margin: 30px -11.36364% 20px 40px;
    float: right; }
  .blogmeat p, .blogmeat li {
    font: 20px/27px "Miller Text", "Times New Roman", Times, serif;
    color: #515151;
    margin: 25px 0; }
  .blogmeat li {
    margin: 12px 0; }
  .blogmeat ul {
    margin-left: 20px; }
  .blogmeat .headshot {
    float: left;
    display: block;
    margin-right: 2.27273%;
    width: 11.36364%;
    position: absolute;
    top: 0;
    z-index: 90;
    left: 0; }
    .blogmeat .headshot:last-child {
      margin-right: 0; }
    .blogmeat .headshot img {
      border-radius: 100%; }
    @media screen and (max-width: 863px) {
      .blogmeat .headshot {
        display: none; } }
  .blogmeat .column {
    float: left;
    display: block;
    margin-right: 2.27273%;
    width: 72.72727%;
    margin-left: 13.63636%; }
    .blogmeat .column:last-child {
      margin-right: 0; }
  @media screen and (max-width: 863px) {
    .blogmeat .quote {
      margin-top: 60px; }
      .blogmeat .quote cite {
        padding-top: 10px; }
    .blogmeat h3 {
      font: 24px/27px "AvenirHeavy", Helvetica, Arial, sans-serif; }
    .blogmeat .column {
      padding: 0;
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 100%;
      margin-left: 0%; }
      .blogmeat .column:last-child {
        margin-right: 0; }
    .blogmeat .imageLeft figure {
      width: 100%;
      margin: 0 0 20px 0;
      float: none; }
    .blogmeat .imageRight figure {
      width: 100%;
      margin: 0 0 20px 0;
      float: none; } }

.vidcontainer {
  position: relative;
  padding-bottom: 56.25%; }

div.video {
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 534px; }
  div.video a {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url("https://statesofmatter.com/img/template/playbutton.png") no-repeat center center; }
  div.video iframe {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 534px; }
  div.video span {
    display: none;
    height: 100%;
    width: 100%; }
  div.video.playing {
    background: transparent;
    background-image: none !important; }
    div.video.playing span {
      display: block; }
    div.video.playing a {
      display: none; }

section.video article {
  position: relative;
  padding-bottom: 56.25%;
  margin-bottom: 60px; }
@media screen and (max-width: 863px) {
  section.video article {
    margin-bottom: 0; } }

.testimonial {
  margin-bottom: 30px; }
  .testimonial h3 {
    text-align: center;
    margin-bottom: 50px; }
  .testimonial blockquote {
    width: 50%;
    float: left;
    height: 413px;
    background: #7c4648 url("https://statesofmatter.com/img/template/testimonialarrow.png") no-repeat bottom 40px right 40px;
    color: #FFF;
    font: italic 22px/30px "Miller Text", "Times New Roman", Times, serif;
    position: relative;
    padding: 100px 95px 40px 40px; }
    .testimonial blockquote b {
      font: italic 125px/1px "Miller Text", "Times New Roman", Times, serif;
      display: block;
      margin: 0 0 0 -15px; }
    .testimonial blockquote cite {
      display: block;
      position: absolute;
      bottom: 40px;
      left: 40px;
      color: #af895f;
      font: italic bold 14px/18px "Miller Text", "Times New Roman", Times, serif;
      width: 170px; }
  .testimonial div.video {
    width: 50%;
    position: absolute;
    right: 0;
    background-size: cover;
    left: auto;
    top: auto;
    height: 413px; }
    .testimonial div.video.playing {
      background: #000; }
      .testimonial div.video.playing span {
        display: block; }
      .testimonial div.video.playing iframe {
        width: 100%;
        height: 413px; }
      .testimonial div.video.playing a {
        display: none; }
    .testimonial div.video span {
      display: none; }
    .testimonial div.video a {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: url("https://statesofmatter.com/img/template/playbutton.png") no-repeat center center; }
  @media screen and (max-width: 863px) {
    .testimonial blockquote, .testimonial div.video {
      width: 100%;
      height: auto; }
    .testimonial div.video {
      height: auto;
      float: left;
      position: relative; }
      .testimonial div.video span {
        display: block;
        padding-top: 57%;
        position: relative; }
    .testimonial blockquote {
      padding-bottom: 140px;
      padding-right: 20px;
      padding-left: 40px; } }

.meat {
  position: relative;
  z-index: 10; }
  .meat a {
    color: #af895f;
    font-style: italic;
    font-weight: bold;
    text-decoration: none; }
  .meat h3 {
    margin: 60px 0 25px 0;
    font: 28px/34px "AvenirHeavy", Helvetica, Arial, sans-serif;
    letter-spacing: 0; }
  .meat h4 {
    font: italic 24px/28px "Miller Text", "Times New Roman", Times, serif;
    color: #173851;
    margin: 0 0 20px 0; }
  .meat h4.mauve {
    color: #7c4648;
    background: transparent; }
  .meat ul, .meat ol {
    margin: 0 0 0 20px;
    font: 16px/22px "Miller Text", "Times New Roman", Times, serif;
    color: #515151;
    padding: 8px 0; }
  .meat li {
    margin: 12px 40px 12px 0; }
  .meat p {
    color: #515151;
    font: 16px/22px "Miller Text", "Times New Roman", Times, serif; }
    .meat p.bigger {
      font: 24px/30px "Miller Text", "Times New Roman", Times, serif; }
  .meat .truth h4 {
    color: #FFF;
    font-weight: bold; }
  .meat .quote {
    margin: 40px 0 0 0; }
  .meat .fivefivefive {
    margin-bottom: 70px; }
  .meat .fiveeight .five, .meat .fiveeight .eight {
    margin-bottom: 15px; }
  .meat .group > div {
    padding: 0; }
    .meat .group > div.solo {
      padding: 20px 0; }
    .meat .group > div.intro {
      padding-bottom: 20px; }
  @media screen and (max-width: 863px) {
    .meat h4 {
      font-size: 18px;
      line-height: 24px;
      margin: 0 0 10px 0; }
    .meat .quote blockquote {
      font-size: 18px;
      line-height: 24px; }
    .meat .quote cite {
      padding: 10px 0; }
    .meat .quote .group > .solo {
      padding-top: 20px; }
    .meat p.bigger {
      font: 18px/24px "Miller Text", "Times New Roman", Times, serif; }
    .meat h3 {
      font-size: 18px;
      line-height: 24px;
      margin: 30px 0 15px; }
    .meat .group > div.solo {
      padding: 0; }
    .meat .group > div.intro {
      padding-bottom: 0; } }

.count3 {
  padding-bottom: 40px; }

.count7 section {
  margin-bottom: 40px; }
  .count7 section.intro {
    margin-bottom: 20px; }
@media screen and (max-width: 863px) {
  .count7 section {
    margin-bottom: 0; } }

img {
  max-width: 100%;
  height: auto; }

a {
  color: #173851;
  transition: all 0.2s ease; }

svg, span, div.sf, h3, button {
  transition: all 0.2s ease; }

header section {
  transition: background-color 0.2s ease; }

nav {
  font-family: "AvenirBold", Helvetica, Arial, sans-serif; }

.red {
  background: #d71920; }

.blue {
  background: #173851; }

.gold {
  background: #af895f; }

.grey {
  background: #515151; }

.lightgrey {
  background: #999999; }

.mauve {
  background: #7c4648; }

.darkblue {
  background: #062336; }

.pale {
  background: #fcfcf5;
  border: 1px #cacac4 solid; }

.solo {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 100%; }
  .solo:last-child {
    margin-right: 0; }

.one {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 4.54545%; }
  .one:last-child {
    margin-right: 0; }

.two {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 11.36364%; }
  .two:last-child {
    margin-right: 0; }

.three {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 18.18182%; }
  .three:last-child {
    margin-right: 0; }

.five {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 31.81818%; }
  .five:last-child {
    margin-right: 0; }

.seven {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 45.45455%; }
  .seven:last-child {
    margin-right: 0; }

.eight {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 52.27273%; }
  .eight:last-child {
    margin-right: 0; }

.nine {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 59.09091%; }
  .nine:last-child {
    margin-right: 0; }

.duo {
  width: 50%;
  float: left; }

@media screen and (max-width: 863px) {
  .blank {
    display: none; }

  .duo {
    width: 100%; }

  .five, .seven, .eight, .nine {
    float: left;
    display: block;
    margin-right: 2.27273%;
    width: 100%; }
    .five:last-child, .seven:last-child, .eight:last-child, .nine:last-child {
      margin-right: 0; }

  .bloggrid h5 {
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 17px;
    font-size: 14px; }
  .bloggrid h3 {
    padding-bottom: 5px; }
  .bloggrid div {
    overflow: hidden; }

  .group.collapsed > div.bloggrid div a {
    padding: 10px 15px; } }
.alphabets p {
  margin-bottom: 30px; }

.avenirheavy {
  font: 32px/32px "AvenirHeavy", Helvetica, Arial, sans-serif; }

.avenirbold {
  font: 24px/26px "AvenirBold", Helvetica, Arial, sans-serif; }

.avenir {
  font: 18px/24px "AvenirReg", Helvetica, Arial, sans-serif; }

.millerreg {
  font: 18px/24px "Miller Text", "Times New Roman", Times, serif; }

.millerital {
  font: italic 18px/24px "Miller Text", "Times New Roman", Times, serif; }

.millerbold {
  font: bold 18px/24px "Miller Text", "Times New Roman", Times, serif; }

.millerboldital {
  font: bold italic 18px/24px "Miller Text", "Times New Roman", Times, serif; }

.bodyoverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50; }

.pagemargin {
  padding: 0 60px; }
  @media screen and (max-width: 863px) {
    .pagemargin {
      padding: 0 20px; } }

main, footer, header {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.index {
  z-index: 99; }
  .index .five {
    margin-bottom: -173px; }
  .index h3 {
    text-align: center;
    margin-bottom: 30px; }
  .index h2 {
    height: 121px;
    color: #FFF;
    position: relative;
    font-size: 24px;
    line-height: 24px;
    padding: 35px 35px 15px 40%; }
    .index h2 a {
      color: #FFF; }
    .index h2 svg {
      position: absolute;
      left: 16%;
      top: 35px;
      height: 45px; }
    .index h2 path, .index h2 polygon, .index h2 rect, .index h2 circle, .index h2 ellipse {
      fill: #af895f; }
    @media screen and (max-width: 1090px) {
      .index h2 {
        padding-left: 37%; }
        .index h2 svg {
          left: 12%; } }
  .index ul {
    list-style: none;
    height: 173px;
    font: 14px/18px "AvenirBold", Helvetica, Arial, sans-serif;
    padding: 30px 35px;
    background: #fcfcf5; }
    .index ul li {
      padding: 5px 0; }
    .index ul a {
      color: #515151;
      position: relative; }
      .index ul a:hover {
        font-family: "AvenirHeavy", Helvetica, Arial, sans-serif;
        line-height: 17px; }
      .index ul a.active {
        font-family: "AvenirHeavy", Helvetica, Arial, sans-serif; }
        .index ul a.active:hover {
          line-height: 18px; }
        .index ul a.active:before {
          content: 'x';
          position: absolute;
          left: -20px; }
  .index a {
    text-decoration: none; }
  .index .brand-comms h2 {
    background: #7D474B; }
  .index .brand-comms a.active {
    color: #7D474B; }
  .index .brand-strategy h2 {
    background: #163449; }
  .index .brand-strategy a.active {
    color: #163449; }
  .index .brand-essentials h2 {
    background: #135146; }
  .index .brand-essentials a.active {
    color: #135146; }
  @media screen and (max-width: 863px) {
    .index {
      background: #173851;
      padding: 0 20px;
      margin: 0 -20px; }
      .index div.five.brand-strategy {
        margin-top: -120px; }
      .index h3 {
        position: absolute;
        top: -200px;
        width: 100%;
        left: 0;
        font-size: 24px;
        line-height: 30px;
        padding: 0 20px; }
      .index .five {
        margin-bottom: 0; } }

header {
  width: 100%;
  overflow: hidden;
  background: #fcfcf5;
  position: relative; }
  header .special {
    max-width: 1060px;
    margin: 0 auto;
    position: relative;
    padding: 0 60px;
    background: url(https://www.statesofmatter.com/img/eye2.png) no-repeat 60px 45px;
    background-size: 129px auto; }
    header .special path {
      fill: #153449; }
    header .special circle {
      fill: #FFF; }
    header .special svg {
      position: absolute;
      left: 220px;
      top: -130px;
      width: 651px;
      height: 651px; }
    header .special .header {
      font: 50px/62px "AvenirHeavy", Helvetica, Arial, sans-serif;
      color: #af895f;
      position: relative;
      z-index: 10;
      text-transform: uppercase;
      padding: 287px 0 0 230px;
      margin: 0; }
      header .special .header span {
        font: normal 50px/52px "Miller Text", "Times New Roman", Times, serif;
        width: 200px;
        text-transform: none;
        position: absolute;
        left: 0;
        top: auto;
        letter-spacing: -0.01em;
        bottom: 0; }
      header .special .header em {
        display: block;
        border-bottom: 1px #af895f solid;
        width: 60px;
        position: absolute;
        bottom: 25px;
        left: 157px; }
    header .special h1 {
      position: relative;
      letter-spacing: 0;
      z-index: 10;
      font: italic 20px/24px "Miller Text", "Times New Roman", Times, serif;
      color: #af895f;
      padding: 2px 0 0 230px;
      max-width: 550px; }
    header .special a {
      position: absolute;
      right: 60px;
      z-index: 100;
      width: 108px;
      height: 108px;
      border-radius: 100%;
      background: #173851;
      color: #d71920;
      font: 18px/118px "AvenirBold", Helvetica, Arial, sans-serif;
      text-align: center;
      text-decoration: none;
      top: -20px; }
      header .special a:hover {
        background: #d71920;
        color: #173851; }
  @media screen and (max-width: 863px) {
    header.sticky section {
      box-shadow: rgba(0, 0, 0, 0.1) 0 0 12px; }
    header.sticky ul {
      display: none; } }
  header.sticky nav {
    padding-right: 130px; }
  header.sticky section {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: #fcfcf5; }
  header.sticky a {
    color: #515151; }
    header.sticky a.hire {
      display: block;
      color: #d71920; }
      header.sticky a.hire:hover {
        color: #fcfcf5; }
  header.sticky.home section {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: #fcfcf5; }
  header.sticky.home nav {
    padding: 0 130px 0 0; }
    header.sticky.home nav a {
      color: #515151; }
      header.sticky.home nav a:hover {
        color: #af895f; }
      header.sticky.home nav a.hire {
        display: block;
        color: #d71920; }
        header.sticky.home nav a.hire:hover {
          color: #fcfcf5; }
  header.sticky.home .logo path {
    fill: #173851; }
  header.home {
    position: relative;
    height: 100vh;
    min-height: 625px;
    max-height: 700px;
    padding: 0; }
    header.home section {
      background: #173851;
      position: absolute;
      top: auto;
      bottom: 0;
      height: 72px; }
    header.home nav {
      padding: 0; }
      header.home nav a {
        color: #fcfcf5; }
        header.home nav a.hire {
          display: none; }
    header.home .logo path {
      fill: #FFF; }
  header section {
    width: 100%;
    max-width: 100%;
    padding: 0 60px; }
  header nav {
    max-width: 940px;
    margin: 0 auto;
    text-align: right;
    position: relative; }
    header nav li {
      list-style: none;
      display: inline-block;
      text-align: center; }
      header nav li.navservices a {
        width: 64px; }
      header nav li.navwork a {
        width: 42px; }
      header nav li.navblog a {
        width: 36px; }
      header nav li.navabout a {
        width: 46px; }
    header nav a {
      display: inline-block;
      font: 16px/22px "AvenirReg", Helvetica, Arial, sans-serif;
      margin: 25px 20px;
      text-align: center;
      transition: none;
      text-decoration: none; }
      header nav a.logo {
        position: relative;
        padding: 0;
        text-align: left;
        text-indent: -99999px;
        float: left;
        display: block;
        margin-top: 26px;
        margin-left: 0;
        margin-right: 0;
        width: 180px; }
        header nav a.logo svg {
          position: absolute;
          top: 0;
          left: 0;
          width: 180px; }
        header nav a.logo path {
          fill: #173851; }
        header nav a.logo:hover {
          border-bottom: 0; }
      header nav a.hire {
        background: #173851;
        font: 16px/20px "AvenirBold", Helvetica, Arial, sans-serif;
        position: absolute;
        padding: 27px 130px 26px 60px;
        right: -411px;
        top: 0;
        width: 661px;
        text-align: left;
        margin: 0 -130px 0 0; }
        header nav a.hire:hover {
          border-bottom: 0;
          color: #d71920;
          line-height: 20px; }
      header nav a:hover {
        border-bottom: 2px #af895f solid;
        font-family: "AvenirBold", Helvetica, Arial, sans-serif;
        color: #af895f;
        line-height: 21px; }
  header .mobile {
    display: none; }
  @media screen and (max-width: 863px) {
    header {
      padding: 0 20px;
      height: 50px; }
      header .special a {
        display: none; }
      header .special .header {
        margin-top: 100px; }
      header.sticky.home section {
        background: #173851; }
      header.sticky.home nav {
        padding: 0; }
      header.sticky.home .logo path {
        fill: #FFF; }
      header.home {
        margin-bottom: 0; }
        header.home nav a.hire {
          display: block; }
        header.home ul {
          display: none;
          background: #173851; }
        header.home section {
          position: fixed;
          top: 0;
          bottom: auto;
          height: 50px;
          z-index: 100; }
      header .mobile {
        display: block;
        position: absolute;
        left: 20px;
        top: 18px; }
        header .mobile a {
          display: block;
          height: 20px;
          width: 20px; }
          header .mobile a.view svg.close {
            opacity: 1; }
        header .mobile svg {
          display: block;
          pointer-events: none; }
          header .mobile svg.close {
            opacity: 0;
            position: absolute;
            margin: -2px 0 0 2px; }
      header rect, header path {
        fill: #FFF; }
      header.sticky section, header.home section {
        background: #173851;
        padding: 0; }
      header.sticky nav, header.home nav {
        padding-right: 0; }
        header.sticky nav li, header.home nav li {
          display: block; }
        header.sticky nav ul a, header.home nav ul a {
          font: 30px/24px "AvenirHeavy", Helvetica, Arial, sans-serif;
          color: #FFF;
          text-align: center;
          display: block;
          padding: 20px 0;
          border-bottom: 1px #1A1919 solid;
          width: 100%;
          margin: 0; }
        header.sticky nav ul, header.home nav ul {
          width: 100%; }
      header nav a.hire {
        padding: 0 10px;
        margin-right: -177px;
        font: normal 11px/50px "AvenirBold", Helvetica, Arial, sans-serif;
        height: 50px;
        text-transform: uppercase; }
      header nav a.logo {
        margin-top: 0;
        height: 50px;
        width: 126px;
        margin: 0 auto;
        float: none; }
        header nav a.logo svg {
          width: 126px;
          top: 17px; }
        header nav a.logo path {
          fill: #FFF; } }
  @media screen and (max-width: 685px) {
    header .special {
      padding: 0;
      -ms-transform: scale(1.3);
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      width: 60%;
      background: url(/img/eye.png) no-repeat 20px 181px;
      background-size: 59px auto; }
      header .special .header {
        padding: 458px 0 0 20px;
        font-size: 38px;
        margin-top: 0; }
        header .special .header em {
          left: 125px;
          top: 430px;
          bottom: auto; }
        header .special .header span {
          left: 20px;
          top: 370px;
          font-size: 38px;
          line-height: 40px;
          width: 140px; }
      header .special h1 {
        padding: 15px 40px 0 20px;
        font-size: 18px; }
      header .special svg {
        left: 90px;
        top: 87px;
        width: 310px;
        height: 310px; } }
  @media screen and (max-width: 685px) {
    header.home {
      height: 620px;
      min-height: 620px;
      max-height: 620px; }
    header .special {
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      width: 100%; } }

main {
  padding-top: 72px; }
  @media screen and (max-width: 863px) {
    main {
      padding-top: 10px; } }

.container, .group {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto; }
  .container::after, .group::after {
    clear: both;
    content: "";
    display: table; }

.fadable > div {
  opacity: 0; }

.group > div {
  padding: 30px 0;
  margin-bottom: 20px; }
  .group > div.column {
    margin-bottom: 0;
    padding-bottom: 10px; }
.group.collapsed div {
  padding: 0;
  margin-bottom: 0; }
  .group.collapsed div span {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(67, 0, 5, 0.75);
    color: #FFF;
    padding: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
    font: 30px/34px "AvenirHeavy", Helvetica, Arial, sans-serif;
    pointer-events: none;
    background-blend-mode: multiply;
    letter-spacing: 1px; }
    .group.collapsed div span em {
      padding-top: 10px;
      font: bold italic 14px/18px "Miller Text", "Times New Roman", Times, serif;
      color: #af895f;
      display: block;
      letter-spacing: 0; }
    .group.collapsed div span:hover {
      opacity: 1; }
    .group.collapsed div span.blue {
      background: rgba(0, 34, 60, 0.8); }
  .group.collapsed div:hover span {
    opacity: 1; }
  .group.collapsed div a {
    background-size: cover;
    background-repeat: no-repeat; }
.group.collapsed > div {
  width: 33.333333%;
  float: left; }
  .group.collapsed > div.full {
    width: 100%;
    float: left; }
    .group.collapsed > div.full div {
      padding-bottom: 33%; }
      .group.collapsed > div.full div span {
        padding: 0 33%; }
  @media screen and (max-width: 863px) {
    .group.collapsed > div {
      width: 50%; }
      .group.collapsed > div.full div {
        padding-bottom: 50%; }
        .group.collapsed > div.full div span {
          padding: 0 20px; } }
  .group.collapsed > div div {
    padding-bottom: 100%;
    position: relative;
    background-color: transparent; }
    .group.collapsed > div div strong {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      background: #2D2E2E;
      padding: 40px;
      font: italic normal 22px/30px "Miller Text", "Times New Roman", Times, serif;
      color: #FFF; }
      .group.collapsed > div div strong.quote {
        margin: 0; }
    .group.collapsed > div div a {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      text-decoration: none;
      text-align: left;
      padding: 20px; }
      .group.collapsed > div div a.blog:hover h3 {
        color: #d71920; }
      .group.collapsed > div div a.project:hover {
        -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
        -o-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(100%);
        filter: gray;
        filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); }
@media screen and (max-width: 863px) {
  .group > div {
    opacity: 1; }
  .group.collapsed div span {
    font-size: 18px;
    line-height: 24px; } }

.intro {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 79.54545%; }
  .intro:last-child {
    margin-right: 0; }
  .intro p {
    font: 24px/30px "Miller Text", "Times New Roman", Times, serif; }
  @media screen and (max-width: 863px) {
    .intro {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 100%; }
      .intro:last-child {
        margin-right: 0; }
      .intro p {
        font: 18px/24px "Miller Text", "Times New Roman", Times, serif; } }

.styleintro {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 59.09091%;
  margin-top: 80px;
  margin-bottom: 40px; }
  .styleintro:last-child {
    margin-right: 0; }

.branding p {
  float: left;
  display: block;
  margin-right: 2.27273%;
  width: 72.72727%;
  margin-left: 13.63636%;
  text-align: center;
  padding: 100px 20px 90px;
  font: bold italic 24px/32px "Miller Text", "Times New Roman", Times, serif; }
  .branding p:last-child {
    margin-right: 0; }

.plain {
  padding-bottom: 100px; }
  .plain div {
    float: left;
    display: block;
    margin-right: 2.27273%;
    width: 79.54545%; }
    .plain div:last-child {
      margin-right: 0; }
    .plain div ul {
      margin-left: 60px;
      margin-top: 15px; }
    .plain div li {
      margin: 15px 0; }
    .plain div p, .plain div li {
      font-size: 16px;
      line-height: 22px;
      color: #515151; }

.clients {
  border-top: 1px #BFBFBF solid;
  margin-bottom: 50px; }
  .clients > h2 {
    text-align: center;
    padding: 70px 0 20px;
    font: normal 30px/34px "AvenirHeavy", Helvetica, Arial, sans-serif;
    letter-spacing: 1px; }
  .clients div {
    width: 25%;
    float: left;
    opacity: 0; }
  @media screen and (max-width: 863px) {
    .clients div {
      width: 70%;
      float: none;
      margin: -20px auto -50px;
      overflow: hidden;
      opacity: 1; }
    .clients > h2 {
      padding: 80px 0 20px; } }

.icons {
  margin-bottom: 80px; }
  .icons .group {
    text-align: center; }
  .icons div:hover {
    cursor: pointer; }
    .icons div:hover span {
      color: #173851; }
    .icons div:hover path, .icons div:hover polygon, .icons div:hover rect, .icons div:hover circle, .icons div:hover ellipse {
      fill: #173851; }
  .icons span {
    display: block;
    font: 13px/18px "AvenirReg", Helvetica, Arial, sans-serif;
    color: #af895f; }
  .icons svg {
    width: 54px;
    height: 54px;
    margin: 0 auto; }
  .icons path, .icons polygon, .icons rect, .icons circle, .icons ellipse {
    fill: #af895f;
    transition: all 0.2s ease; }

.success, .truth {
  text-align: center;
  color: #FFF;
  padding: 25px; }
  .success h2, .truth h2 {
    margin: 40px 0 5px 0;
    font: 36px/40px "AvenirHeavy", Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    padding: 0; }
  @media screen and (max-width: 863px) {
    .success, .truth {
      padding: 10px 20px; }
      .success h2, .truth h2 {
        font: 18px/24px "AvenirHeavy", Helvetica, Arial, sans-serif;
        margin: 20px 0 5px 0; } }

.success {
  background: #173851;
  margin: 10px -60px 65px -60px; }
  .tinted .success {
    margin: 45px 0 -80px 0; }
  .success p {
    color: #FFF;
    padding: 10px 190px 0; }
  .success p.bigger {
    font-size: 30px;
    margin-top: 0;
    padding: 0; }
    .success p.bigger strong {
      font: 35px/30px "AvenirBold", Helvetica, Arial, sans-serif;
      padding: 0 7px;
      color: #af895f; }
  .success .item {
    width: 230px;
    padding: 0 20px;
    display: inline-block;
    vertical-align: top; }
    .success .item strong {
      display: block;
      color: #af895f;
      font: 35px/36px "AvenirBold", Helvetica, Arial, sans-serif;
      margin-bottom: 10px; }
    .success .item em {
      display: block;
      font: italic 30px/36px "Miller Text", "Times New Roman", Times, serif; }
  @media screen and (max-width: 863px) {
    .success {
      margin: 10px -20px; }
      .success p.bigger {
        font-size: 20px;
        margin-top: 10px; }
        .success p.bigger strong {
          display: block; }
      .success .item em {
        font: italic 18px/24px "Miller Text", "Times New Roman", Times, serif;
        margin-bottom: 20px; }
      .success div.solo {
        margin-bottom: 0 !important; }
      .success p {
        padding: 10px; }
      .tinted .success {
        margin: 0 0 -80px 0; } }

.collage {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 70px;
  -moz-column-gap: 70px;
  column-gap: 70px;
  vertical-align: top; }
  .collage article {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto; }
    .collage article::after {
      clear: both;
      content: "";
      display: table; }
  .collage article, .collage img {
    width: 100%; }
  .collage p {
    margin: 0;
    padding: 12px 0 0 0;
    font-size: 16px;
    color: #515151;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid; }
    .collage p strong {
      font: normal 16px/1 "AvenirBold", Helvetica, Arial, sans-serif; }
  @media screen and (max-width: 863px) {
    .collage {
      -webkit-columns: 1;
      -moz-columns: 1;
      columns: 1; } }

.tinted {
  background: #f1f1e2;
  padding: 70px 0;
  margin: 0 -60px 80px -60px; }
  .tinted > h3 {
    text-align: center;
    margin-bottom: 50px; }
  .tinted .grid {
    margin-bottom: 20px; }
  @media screen and (max-width: 863px) {
    .tinted {
      padding: 40px 0 0 0;
      margin: 0 -20px 0; }
      .tinted section {
        padding: 0; }
        .tinted section.case {
          margin-top: -50px; }
      .tinted .grid {
        margin: 0; }
      .tinted > h3 {
        font-size: 24px;
        padding: 0 20px;
        line-height: 30px;
        margin-bottom: 20px; } }

.truth {
  background: #7c4648;
  margin: 40px -60px 65px;
  position: relative; }
  .truth p {
    color: #FFF; }
  .truth img {
    display: none;
    position: absolute;
    top: -80px;
    left: 50%;
    margin-left: -250px; }
  @media screen and (max-width: 863px) {
    .truth {
      margin: 60px -20px 10px -20px; }
      .truth h2 {
        font: 30px/37px "AvenirHeavy", Helvetica, Arial, sans-serif;
        padding: 10px 0; }
      .truth img {
        margin-left: -210px;
        top: -90px; } }

.quote {
  margin-top: 80px; }
  .quote blockquote {
    font: italic bold 30px/40px "Miller Text", "Times New Roman", Times, serif;
    color: #173851; }
  .quote cite {
    display: block;
    font: italic bold 14px/24px "Miller Text", "Times New Roman", Times, serif;
    color: #af895f;
    padding: 28px 0; }
    .quote cite svg {
      width: 16px;
      height: 16px;
      float: left;
      margin: 3px 8px 0 0; }
    .quote cite path {
      fill: #af895f; }
    .quote cite a {
      color: #af895f;
      text-decoration: none; }
    .quote cite:after {
      content: '';
      display: inline-block;
      width: 75px;
      border-top: 1px #af895f solid;
      margin: -20px 0 0 10px;
      height: 5px; }
  .quote strong {
    display: block;
    font: italic normal 150px/20px "Miller Text", "Times New Roman", Times, serif;
    margin: 0 0 -20px -15px; }

.shit {
  background: #f1f1e2;
  text-align: center;
  margin: 40px -60px 55px -60px;
  padding: 65px 0 55px; }
  .shit h2 {
    margin-top: 15px; }
  .shit p {
    color: #515151;
    font: 16px/22px "Miller Text", "Times New Roman", Times, serif;
    padding: 0 130px; }
  @media screen and (max-width: 863px) {
    .shit {
      padding: 35px 0;
      margin: 40px -20px; }
      .shit p {
        padding: 0 20px; }
      .shit h2 {
        font-size: 30px;
        line-height: 36px;
        padding: 0 30px 15px; } }

.opening {
  position: relative;
  padding-bottom: 150px; }
  .opening p {
    margin-right: 40px; }
  @media screen and (max-width: 863px) {
    .opening {
      padding-bottom: 250px; }
      .opening p {
        margin-right: 0; } }

.background {
  position: absolute;
  bottom: 0;
  right: -60px; }
  @media screen and (max-width: 863px) {
    .background {
      right: -20px;
      width: 320px; } }

.cats {
  font: 16px/22px "Miller Text", "Times New Roman", Times, serif; }
  .cats a {
    text-decoration: none;
    margin: 0 3px;
    padding: 8px 2px;
    transition: color 0.2s ease;
    white-space: nowrap; }
    .cats a:hover, .cats a.active {
      color: #af895f;
      border-bottom: 1px #af895f solid; }
  @media screen and (max-width: 863px) {
    .cats {
      padding: 35px 0 0 0; } }

section {
  position: relative;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto; }
  section::after {
    clear: both;
    content: "";
    display: table; }
  section.primary {
    margin-bottom: 55px; }
    section.primary.short {
      margin-bottom: 25px; }
      section.primary.short form {
        position: absolute;
        right: 0;
        bottom: 25px;
        width: 300px; }
        section.primary.short form input {
          padding: 6px 20px 6px 40px;
          width: 100%;
          background: #f1f1e2;
          color: #af895f;
          border: 0;
          font: 14px/22px "AvenirReg", Helvetica, Arial, sans-serif;
          text-align: left; }
        section.primary.short form button {
          position: absolute;
          left: 15px;
          top: 5px;
          border: 0;
          background: transparent; }
        section.primary.short form svg {
          width: 12px;
          height: 12px; }
        section.primary.short form path {
          fill: #af895f; }
    section.primary h5 {
      font: 14px/18px "AvenirReg", Helvetica, Arial, sans-serif;
      margin: 62px 0 30px 0;
      color: #999999; }
      section.primary h5 a {
        white-space: nowrap; }
    section.primary article {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 79.54545%; }
      section.primary article:last-child {
        margin-right: 0; }
      section.primary article p {
        font-size: 24px;
        line-height: 30px; }
      section.primary article.work {
        float: left;
        display: block;
        margin-right: 2.27273%;
        width: 59.09091%; }
        section.primary article.work:last-child {
          margin-right: 0; }
    section.primary aside {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 25%;
      margin-left: 13.63636%;
      padding-top: 125px;
      padding-left: 20px; }
      section.primary aside:last-child {
        margin-right: 0; }
      section.primary aside.gap {
        margin-top: 150px; }
      section.primary aside h3 {
        font: normal 14px/28px "AvenirReg", Helvetica, Arial, sans-serif;
        letter-spacing: 0; }
      section.primary aside li {
        list-style: none;
        font: normal 14px/18px "AvenirBold", Helvetica, Arial, sans-serif; }
      section.primary aside a {
        text-decoration: none;
        position: relative;
        display: block;
        height: 50px; }
        section.primary aside a:before {
          content: "";
          display: inline-block;
          vertical-align: middle;
          height: 100%; }
        section.primary aside a.off {
          pointer-events: none; }
      section.primary aside svg {
        width: 18%;
        height: 33px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8%; }
      section.primary aside span {
        display: inline-block;
        line-height: normal;
        vertical-align: middle;
        width: 68%; }
      section.primary aside .main {
        border-bottom: 1px #173851 solid;
        padding-bottom: 10px;
        margin-bottom: 15px; }
        section.primary aside .main path, section.primary aside .main polygon, section.primary aside .main rect, section.primary aside .main circle, section.primary aside .main ellipse {
          fill: #173851; }
        section.primary aside .main h3, section.primary aside .main a {
          color: #173851; }
      section.primary aside .cumulative {
        display: none; }
      section.primary aside .supporting path, section.primary aside .supporting polygon, section.primary aside .supporting rect, section.primary aside .supporting circle, section.primary aside .supporting ellipse {
        fill: #af895f; }
      section.primary aside .supporting h3, section.primary aside .supporting a {
        color: #af895f; }
    @media screen and (max-width: 863px) {
      section.primary {
        margin-bottom: 35px; }
        section.primary.short form {
          width: 280px;
          position: relative;
          bottom: auto;
          padding-top: 30px; }
          section.primary.short form input {
            width: 220px; }
          section.primary.short form button {
            top: 35px; }
        section.primary article {
          float: left;
          display: block;
          margin-right: 2.27273%;
          width: 100%; }
          section.primary article:last-child {
            margin-right: 0; }
          section.primary article.work {
            float: left;
            display: block;
            margin-right: 2.27273%;
            width: 100%; }
            section.primary article.work:last-child {
              margin-right: 0; }
        section.primary aside {
          float: left;
          display: block;
          margin-right: 2.27273%;
          width: 72.72727%;
          margin-left: 0%;
          padding-top: 0;
          padding-left: 0; }
          section.primary aside.gap {
            margin-top: 0; }
          section.primary aside span {
            width: 130px; }
          section.primary aside:last-child {
            margin-right: 0; }
        section.primary h5 {
          margin: 20px 0; }
        section.primary article {
          float: left;
          display: block;
          margin-right: 2.27273%;
          width: 100%; }
          section.primary article:last-child {
            margin-right: 0; }
          section.primary article p {
            font-size: 16px;
            line-height: 22px; }
        section.primary .blank {
          display: none; } }
    section.primary.triangle {
      margin-top: -140px; }
      section.primary.triangle article {
        z-index: 10;
        position: relative; }
      section.primary.triangle .trileft {
        position: absolute;
        left: -140px;
        top: -110px;
        z-index: 1; }
      @media screen and (max-width: 863px) {
        section.primary.triangle {
          margin-top: 80px; }
          section.primary.triangle .trileft {
            left: -80px;
            top: -60px; } }
    section.primary.case {
      margin-bottom: 0; }
      section.primary.case article.work {
        float: left;
        display: block;
        margin-right: 2.27273%;
        width: 100%; }
        section.primary.case article.work:last-child {
          margin-right: 0; }
      section.primary.case article.work h2 {
        float: left;
        display: block;
        margin-right: 2.27273%;
        width: 59.09091%; }
        section.primary.case article.work h2:last-child {
          margin-right: 0; }
      section.primary.case aside {
        padding-top: 0; }
        section.primary.case aside path, section.primary.case aside polygon, section.primary.case aside rect, section.primary.case aside ellipse, section.primary.case aside circle {
          fill: #173851; }
      section.primary.case h2 {
        margin-bottom: 10px; }
      section.primary.case h4 {
        font: bold italic 35px/80px "Miller Text", "Times New Roman", Times, serif;
        color: #173851; }
        section.primary.case h4 img {
          display: inline-block;
          margin-bottom: -5px; }
      @media screen and (max-width: 863px) {
        section.primary.case {
          margin-bottom: 12px; }
          section.primary.case h2 {
            font: 30px/36px "AvenirHeavy", Helvetica, Arial, sans-serif;
            margin-bottom: 0;
            padding-bottom: 0; }
          section.primary.case article.work {
            float: left;
            display: block;
            margin-right: 2.27273%;
            width: 100%; }
            section.primary.case article.work:last-child {
              margin-right: 0; }
          section.primary.case h4 {
            font-size: 18px;
            line-height: 50px; }
            section.primary.case h4:before {
              content: '';
              display: inline-block;
              height: 100%;
              vertical-align: middle; }
            section.primary.case h4 span {
              display: inline-block;
              vertical-align: bottom; }
            section.primary.case h4 img {
              transform: scale(0.8);
              vertical-align: top;
              max-width: 80%; } }
    section.primary.narrow h5 {
      margin-bottom: 43px; }
    section.primary.narrow h6 {
      font: 14px/22px "AvenirReg", Helvetica, Arial, sans-serif;
      margin-bottom: 15px; }
    section.primary.narrow b {
      font-family: "AvenirBold", Helvetica, Arial, sans-serif;
      font-weight: normal; }
    section.primary.narrow article {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 59.09091%; }
      section.primary.narrow article:last-child {
        margin-right: 0; }
    @media screen and (max-width: 863px) {
      section.primary.narrow article {
        float: left;
        display: block;
        margin-right: 2.27273%;
        width: 100%; }
        section.primary.narrow article:last-child {
          margin-right: 0; } }
  section.scrolling {
    margin-bottom: 60px; }
    section.scrolling img {
      display: block; }
    section.scrolling .desktop {
      background: url(https://statesofmatter.com/img/template/web-chrome.png) no-repeat;
      width: 833px;
      height: 852px;
      position: relative;
      margin: 0 0 90px -8px; }
      section.scrolling .desktop span {
        display: block;
        position: absolute;
        top: 71px;
        left: 10px;
        height: 769px;
        overflow: scroll;
        width: 816px; }
        section.scrolling .desktop span::-webkit-scrollbar {
          display: none; }
    section.scrolling .mobile {
      background: url(https://statesofmatter.com/img/template/phone-chrome.png) no-repeat;
      width: 227px;
      height: 447px;
      position: absolute;
      right: 0;
      bottom: 0; }
      section.scrolling .mobile span {
        display: block;
        position: absolute;
        top: 47px;
        left: 28px;
        height: 319px;
        overflow: scroll;
        width: 190px;
        border: 6px #1A1919 solid;
        border-radius: 3px; }
        section.scrolling .mobile span::-webkit-scrollbar {
          display: none; }
    @media screen and (max-width: 863px) {
      section.scrolling {
        display: none; } }
  section.breathe {
    padding: 60px 0 60px 0; }
    section.breathe img {
      width: 100%; }
    section.breathe.captioned p {
      font: italic bold 16px/22px "Miller Text", "Times New Roman", Times, serif;
      text-align: center; }
    @media screen and (max-width: 863px) {
      section.breathe {
        padding: 0; } }
  section.images {
    padding: 0 0 20px 0; }
    section.images.breathe {
      padding: 60px 0 100px 0; }
    section.images img {
      width: auto;
      margin: 0 auto;
      display: block; }
      section.images img.mobileonly {
        display: none; }
      @media screen and (max-width: 863px) {
        section.images img {
          width: 100%;
          height: auto; }
          section.images img.mobileonly {
            display: block; } }
    section.images h5 {
      font: bold italic 24px/22px "Miller Text", "Times New Roman", Times, serif;
      color: #173851;
      margin: 60px 0 40px 0; }
    section.images .duo {
      padding: 0 0 0 10px; }
      section.images .duo:first-child {
        padding: 0 10px 0 0; }
      section.images .duo img {
        width: 100%;
        height: auto; }
    section.images .trio {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 31.81818%; }
      section.images .trio img {
        width: 100%;
        height: auto; }
      section.images .trio:last-child {
        margin-right: 0; }
    @media screen and (max-width: 863px) {
      section.images.breathe {
        padding: 0; }
      section.images .duo {
        padding: 0; }
        section.images .duo:first-child {
          padding: 0;
          margin-bottom: 20px; }
      section.images .trio {
        float: left;
        display: block;
        margin-right: 2.27273%;
        width: 100%;
        margin-bottom: 20px; }
        section.images .trio:last-child {
          margin-right: 0; }
        section.images .trio:last-child {
          margin-bottom: 0; } }
  section.related {
    position: relative;
    z-index: 99;
    margin-bottom: 110px; }
    section.related .blog {
      background: #f1f1e2;
      position: relative; }
      section.related .blog > div {
        padding-top: 38%; }
        section.related .blog > div .block {
          position: absolute;
          left: 44px;
          top: 34px;
          z-index: 10;
          width: 33%;
          bottom: 44px; }
        section.related .blog > div .btn {
          position: absolute;
          bottom: 0; }
        section.related .blog > div h5 {
          margin-top: 0;
          color: #173851; }
        section.related .blog > div h4 {
          color: #173851;
          line-height: 20px; }
      section.related .blog img {
        position: absolute;
        bottom: 0;
        right: 0; }
    section.related > h3 {
      text-align: center;
      margin: 70px 0 40px 0; }
    section.related.last {
      margin-bottom: -165px; }
    section.related .duo {
      padding: 0; }
      section.related .duo div {
        padding-bottom: 100%;
        position: relative;
        background-color: transparent;
        opacity: 0; }
        section.related .duo div span {
          opacity: 0;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(67, 0, 5, 0.75);
          color: #FFF;
          padding: 0 20px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-flex-direction: column;
          flex-direction: column;
          text-align: center;
          font: 30px/34px "AvenirHeavy", Helvetica, Arial, sans-serif;
          pointer-events: none;
          background-blend-mode: multiply;
          letter-spacing: 1px; }
          section.related .duo div span em {
            font: bold italic 14px/28px "Miller Text", "Times New Roman", Times, serif;
            color: #af895f;
            display: block;
            letter-spacing: 0; }
          section.related .duo div span:hover {
            opacity: 1; }
          section.related .duo div span.blue {
            background: rgba(0, 34, 60, 0.8); }
        section.related .duo div:hover span {
          opacity: 1; }
        section.related .duo div a {
          position: absolute;
          right: 0;
          left: 0;
          top: 0;
          bottom: 0;
          text-decoration: none;
          text-align: left;
          padding: 20px;
          background-size: cover; }
          section.related .duo div a.project:hover {
            -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
            -o-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
            -webkit-filter: grayscale(100%);
            filter: gray;
            filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); }
    @media screen and (max-width: 863px) {
      section.related {
        margin-bottom: 30px; }
        section.related.last {
          margin-bottom: -80px; }
        section.related .blog > div {
          padding-top: 0;
          padding-bottom: 20px; }
          section.related .blog > div .block {
            position: relative;
            width: 100%;
            left: auto;
            padding: 25px 25px 35px 25px;
            top: auto;
            bottom: auto; }
          section.related .blog > div h4 {
            margin-bottom: 30px; }
          section.related .blog > div h5 {
            margin-top: 20px; }
          section.related .blog > div .btn {
            position: relative;
            bottom: auto; }
          section.related .blog > div img {
            display: none; }
        section.related .duo div span {
          font: 18px/24px "AvenirHeavy", Helvetica, Arial, sans-serif; }
        section.related > h3 {
          font-size: 18px;
          line-height: 24px;
          padding: 0 40px;
          margin: 50px 0 30px; } }
  section#colors .group {
    position: relative; }
    section#colors .group div {
      position: relative; }
      section#colors .group div div {
        padding-bottom: 100%;
        margin-bottom: 5px; }
    section#colors .group span {
      display: inline-block;
      text-align: center;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; }
    section#colors .group em {
      padding-left: 10px;
      font-size: 12px;
      color: #999;
      font-style: normal;
      display: none; }
    section#colors .group div:hover em {
      display: inline; }
  section#grid .collapsed.group div {
    background: transparent; }
  section#grid .group div {
    background: #af895f;
    text-align: center;
    font-weight: bold; }
    section#grid .group div.blank {
      background: #fcfcf5; }

.grid {
  overflow: hidden; }
  .grid.work {
    min-height: 700px; }
  .grid > h3 {
    padding: 80px 0 40px; }
  .grid.tight > h3 {
    padding: 40px 0 40px; }
  @media screen and (max-width: 863px) {
    .grid {
      margin: 0 -20px; }
      .grid.work > h3, .grid.tight > h3 {
        font: 30px/22px "AvenirHeavy", Helvetica, Arial, sans-serif; }
      .grid.tight > h3 {
        padding: 10px 0 30px; }
      .grid.work > h3 {
        padding: 30px 0 30px; }
      .grid > h3 {
        margin-left: 20px; } }

footer {
  text-align: center;
  position: relative;
  color: #af895f;
  background: #173851; }
  footer.buffer {
    padding-top: 190px;
    margin-top: 0;
    margin-bottom: 0; }
  footer .name {
    padding: 60px 0;
    text-indent: -99999px;
    position: relative;
    height: 46px;
    margin-bottom: 50px; }
    footer .name svg {
      width: 46px;
      height: 46px;
      position: absolute;
      left: 50%;
      margin-left: -23px; }
  footer p {
    color: #af895f;
    font: 16px/22px "Miller Text", "Times New Roman", Times, serif;
    margin: 0; }
    footer p a {
      font-size: 15px; }
  footer h6 {
    text-transform: uppercase;
    font: 12px/18px "AvenirReg", Helvetica, Arial, sans-serif;
    padding: 35px 0; }
  footer path {
    fill: #FFF; }
  footer h3 {
    font: normal 22px/24px "AvenirReg", Helvetica, Arial, sans-serif;
    margin: 10px 0 20px 0;
    padding: 0; }
  footer nav {
    margin-bottom: 23px; }
  footer .social {
    padding: 25px 0 15px; }
    footer .social a {
      padding: 7px; }
    footer .social path {
      fill: #d71920; }
  footer form {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    display: block;
    margin-right: 2.27273%;
    width: 45.45455%;
    display: block;
    width: 100%;
    margin-bottom: 20px; }
    footer form::after {
      clear: both;
      content: "";
      display: table; }
    footer form:last-child {
      margin-right: 0; }
    footer form button {
      position: absolute;
      opacity: 0; }
    footer form fieldset {
      border: 0;
      padding: 0;
      margin: 0;
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 59.09091%;
      margin-left: 20.45455%; }
      footer form fieldset:last-child {
        margin-right: 0; }
    footer form input[type="color"], footer form input[type="date"], footer form input[type="datetime"], footer form input[type="datetime-local"], footer form input[type="email"], footer form input[type="month"], footer form input[type="number"], footer form input[type="password"], footer form input[type="search"], footer form input[type="tel"], footer form input[type="text"], footer form input[type="time"], footer form input[type="url"], footer form input[type="week"], footer form textarea, footer form input[type="private"] {
      margin: 0 auto;
      background: #062336;
      font: 14px/22px "AvenirReg", Helvetica, Arial, sans-serif;
      border: 3px #173851 solid;
      width: 100%;
      padding: 6px; }
    footer form input[type="color"]:focus, footer form input[type="date"]:focus, footer form input[type="datetime"]:focus, footer form input[type="datetime-local"]:focus, footer form input[type="email"]:focus, footer form input[type="month"]:focus, footer form input[type="number"]:focus, footer form input[type="password"]:focus, footer form input[type="search"]:focus, footer form input[type="tel"]:focus, footer form input[type="text"]:focus, footer form input[type="time"]:focus, footer form input[type="url"]:focus, footer form input[type="week"]:focus, footer form textarea:focus, footer form input[type="private"] {
      border: 3px #39576e solid; }
  footer nav a {
    padding: 0 20px;
    color: #FFF; }
    footer nav a:hover {
      color: #FFF; }
  footer a {
    color: #af895f;
    text-decoration: none; }
    footer a:hover {
      color: #af895f; }
  @media screen and (max-width: 863px) {
    footer.buffer {
      padding-top: 50px; }
    footer nav {
      line-height: 36px; }
      footer nav a {
        padding: 0 10px;
        color: #eee; }
    footer form fieldset {
      float: left;
      display: block;
      margin-right: 2.27273%;
      width: 86.36364%;
      margin-left: 6.81818%; }
      footer form fieldset:last-child {
        margin-right: 0; }
    footer p, footer h6 {
      padding: 0 30px; }
    footer h6 {
      padding-bottom: 40px; } }

a.close {
  position: fixed;
  top: 20px;
  right: 20px;
  height: 32px;
  width: 32px;
  border-radius: 100%;
  background: #062336;
  pointer-events: auto; }
  a.close svg {
    position: absolute;
    top: 9px;
    left: 9px; }
  a.close line {
    stroke: #d71920;
    stroke-width: 3px; }

.hireform {
  text-align: center;
  color: #FFF;
  position: fixed;
  z-index: 99999;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow: scroll;
  background: #173851;
  font: 28px/34px "AvenirReg", Helvetica, Arial, sans-serif; }
  .hireform.mobilehire {
    display: block; }
    .hireform.mobilehire fieldset > div {
      display: block;
      opacity: 1;
      padding-left: 0; }
    .hireform.mobilehire select {
      width: auto;
      color: #af895f;
      margin: 0;
      background: none;
      border: 1px solid transparent;
      outline: none;
      appearance: none;
      -webkit-appearance: none; }
    .hireform.mobilehire .submit {
      opacity: 1; }
  .hireform fieldset {
    border: 0;
    padding: 0; }
    .hireform fieldset > div {
      margin: 15px 0;
      padding-left: 40px;
      display: none;
      opacity: 0; }
      .hireform fieldset > div.phrase3, .hireform fieldset > div.phrase6, .hireform fieldset > div.phrase7, .hireform fieldset > div.phrase8 {
        margin-bottom: 55px; }
        @media screen and (max-width: 863px) {
          .hireform fieldset > div.phrase3, .hireform fieldset > div.phrase6, .hireform fieldset > div.phrase7, .hireform fieldset > div.phrase8 {
            margin-bottom: 25px; } }
      .hireform fieldset > div.phrase7 p {
        overflow: hidden;
        padding-top: 40px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; }
        .hireform fieldset > div.phrase7 p strong {
          display: block;
          float: left;
          width: 25%;
          text-align: left; }
          .hireform fieldset > div.phrase7 p strong:first-child {
            text-align: right; }
  .hireform .submit {
    opacity: 0;
    height: 150px;
    position: relative; }
    .hireform .submit em {
      display: none; }
  .hireform input[type="color"], .hireform input[type="date"], .hireform input[type="datetime"], .hireform input[type="datetime-local"], .hireform input[type="email"], .hireform input[type="month"], .hireform input[type="number"], .hireform input[type="password"], .hireform input[type="search"], .hireform input[type="tel"], .hireform input[type="text"], .hireform input[type="time"], .hireform input[type="url"], .hireform input[type="week"], .hireform textarea, .hireform input[type="private"], .hireform span {
    display: inline-block;
    padding: 2px; }
    .hireform input[type="color"].important, .hireform input[type="date"].important, .hireform input[type="datetime"].important, .hireform input[type="datetime-local"].important, .hireform input[type="email"].important, .hireform input[type="month"].important, .hireform input[type="number"].important, .hireform input[type="password"].important, .hireform input[type="search"].important, .hireform input[type="tel"].important, .hireform input[type="text"].important, .hireform input[type="time"].important, .hireform input[type="url"].important, .hireform input[type="week"].important, .hireform textarea.important, .hireform input[type="private"].important, .hireform span.important {
      display: none; }
  .hireform .title {
    color: #FFF;
    font-size: 46px;
    padding: 95px 0 40px; }
  .hireform h3 {
    font: 34px/50px "AvenirReg", Helvetica, Arial, sans-serif;
    margin: 10px 10px 0; }
  .hireform .complete {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    display: none;
    opacity: 0; }
    .hireform .complete h5 {
      margin: 12px 0 8px 0;
      color: #FFF;
      font-size: 20px; }
      .hireform .complete h5 svg {
        width: 13px;
        height: 13px;
        position: absolute;
        left: 3px;
        top: 3px; }
      .hireform .complete h5 polygon {
        fill: #173851; }
      .hireform .complete h5 em {
        display: inline-block;
        vertical-align: middle;
        font-weight: bold; }
      .hireform .complete h5 em.icon {
        background: #FFF;
        width: 18px;
        height: 18px;
        border-radius: 100%;
        position: relative; }
    .hireform .complete p {
      color: #FFF;
      font: 15px/20px "AvenirReg", Helvetica, Arial, sans-serif; }
  .hireform button {
    background: #062336;
    border: 0;
    color: #d71920;
    padding: 20px 50px;
    font: bold italic 20px/20px "Miller Text", "Times New Roman", Times, serif; }
    .hireform button:hover {
      background: #d71920;
      color: #062336; }
  @media screen and (max-width: 863px) {
    .hireform {
      font: 20px/42px "AvenirReg", Helvetica, Arial, sans-serif; }
      .hireform span.locked {
        height: auto;
        padding-bottom: 4px; }
      .hireform h1 {
        font-size: 30px;
        line-height: 37px;
        padding: 55px 0 20px; } }

.filters {
  position: absolute;
  right: 0;
  top: 80px; }
  .filters form ul {
    left: auto;
    right: 0;
    width: 197px; }
  .filters form li {
    padding: 5px 0; }
  .filters form strong {
    color: #FFF;
    display: block; }
  .filters form span {
    display: inline-block;
    width: 197px;
    font: 12px/32px "AvenirBold", Helvetica, Arial, sans-serif;
    text-align: left;
    padding: 2px 12px;
    border: 0;
    height: auto;
    position: relative;
    cursor: pointer; }
    .filters form span:before {
      position: absolute;
      right: 20px;
      top: 18px;
      width: 24px;
      border-bottom: 1px #FFF solid;
      content: ''; }
  .filters form a {
    color: #FFF;
    text-decoration: none;
    display: block;
    font-size: 14px; }
    .filters form a:hover {
      color: #af895f; }
  @media screen and (max-width: 863px) {
    .filters {
      position: relative;
      right: auto;
      top: auto;
      padding: 0 20px 20px 20px; }
      .filters form span {
        width: 100%;
        margin-bottom: 10px; }
      .filters form ul {
        width: 100%; } }

form input[type="color"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="email"], form input[type="month"], form input[type="number"], form input[type="password"], form input[type="search"], form input[type="tel"], form input[type="text"], form input[type="time"], form input[type="url"], form input[type="week"], form textarea, form input[type="private"], form span {
  border: 0;
  border-bottom: 1px #af895f solid;
  background: #173851;
  width: 160px;
  color: #af895f;
  display: block;
  text-align: center;
  font: 28px/30px "AvenirReg", Helvetica, Arial, sans-serif; }
  form input[type="color"]::-webkit-input-placeholder, form input[type="date"]::-webkit-input-placeholder, form input[type="datetime"]::-webkit-input-placeholder, form input[type="datetime-local"]::-webkit-input-placeholder, form input[type="email"]::-webkit-input-placeholder, form input[type="month"]::-webkit-input-placeholder, form input[type="number"]::-webkit-input-placeholder, form input[type="password"]::-webkit-input-placeholder, form input[type="search"]::-webkit-input-placeholder, form input[type="tel"]::-webkit-input-placeholder, form input[type="text"]::-webkit-input-placeholder, form input[type="time"]::-webkit-input-placeholder, form input[type="url"]::-webkit-input-placeholder, form input[type="week"]::-webkit-input-placeholder, form textarea::-webkit-input-placeholder, form input[type="private"]::-webkit-input-placeholder, form span::-webkit-input-placeholder {
    color: #af895f; }
  form input[type="color"]::-moz-placeholder, form input[type="date"]::-moz-placeholder, form input[type="datetime"]::-moz-placeholder, form input[type="datetime-local"]::-moz-placeholder, form input[type="email"]::-moz-placeholder, form input[type="month"]::-moz-placeholder, form input[type="number"]::-moz-placeholder, form input[type="password"]::-moz-placeholder, form input[type="search"]::-moz-placeholder, form input[type="tel"]::-moz-placeholder, form input[type="text"]::-moz-placeholder, form input[type="time"]::-moz-placeholder, form input[type="url"]::-moz-placeholder, form input[type="week"]::-moz-placeholder, form textarea::-moz-placeholder, form input[type="private"]::-moz-placeholder, form span::-moz-placeholder {
    color: #af895f; }
  form input[type="color"]:-moz-placeholder, form input[type="date"]:-moz-placeholder, form input[type="datetime"]:-moz-placeholder, form input[type="datetime-local"]:-moz-placeholder, form input[type="email"]:-moz-placeholder, form input[type="month"]:-moz-placeholder, form input[type="number"]:-moz-placeholder, form input[type="password"]:-moz-placeholder, form input[type="search"]:-moz-placeholder, form input[type="tel"]:-moz-placeholder, form input[type="text"]:-moz-placeholder, form input[type="time"]:-moz-placeholder, form input[type="url"]:-moz-placeholder, form input[type="week"]:-moz-placeholder, form textarea:-moz-placeholder, form input[type="private"]:-moz-placeholder, form span:-moz-placeholder {
    color: #af895f; }
  form input[type="color"]:-ms-input-placeholder, form input[type="date"]:-ms-input-placeholder, form input[type="datetime"]:-ms-input-placeholder, form input[type="datetime-local"]:-ms-input-placeholder, form input[type="email"]:-ms-input-placeholder, form input[type="month"]:-ms-input-placeholder, form input[type="number"]:-ms-input-placeholder, form input[type="password"]:-ms-input-placeholder, form input[type="search"]:-ms-input-placeholder, form input[type="tel"]:-ms-input-placeholder, form input[type="text"]:-ms-input-placeholder, form input[type="time"]:-ms-input-placeholder, form input[type="url"]:-ms-input-placeholder, form input[type="week"]:-ms-input-placeholder, form textarea:-ms-input-placeholder, form input[type="private"]:-ms-input-placeholder, form span:-ms-input-placeholder {
    color: #af895f; }
  @media screen and (max-width: 863px) {
    form input[type="color"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="email"], form input[type="month"], form input[type="number"], form input[type="password"], form input[type="search"], form input[type="tel"], form input[type="text"], form input[type="time"], form input[type="url"], form input[type="week"], form textarea, form input[type="private"], form span {
      font: 20px/22px "AvenirReg", Helvetica, Arial, sans-serif; } }
form input[type="private"] {
  width: auto; }
form span {
  width: auto;
  min-width: 160px;
  color: #af895f;
  height: 38px;
  padding: 2px;
  margin-bottom: -10px;
  position: relative;
  transition: none;
  cursor: pointer; }
  form span ul {
    position: absolute;
    display: none;
    z-index: 9999;
    left: 0;
    width: 270px;
    top: 38px;
    list-style: none;
    background: #062336;
    color: #FFF;
    padding: 3px 10px;
    box-shadow: rgba(0, 0, 0, 0.18) -10px 10px 0;
    font-size: 19px;
    line-height: 22px; }
  form span strong {
    font-weight: normal; }
  form span li {
    padding: 6px 0 8px 0;
    border-top: 1px #23425a solid; }
    form span li:first-child {
      border: 0; }
  form span li:hover {
    color: #af895f;
    cursor: pointer; }
  form span.auto {
    width: auto; }
  form span:focus {
    outline: none; }
    form span:focus ul {
      display: block; }
  @media screen and (max-width: 863px) {
    form span {
      width: 270px; } }
form input[type="color"]:focus, form input[type="date"]:focus, form input[type="datetime"]:focus, form input[type="datetime-local"]:focus, form input[type="email"]:focus, form input[type="month"]:focus, form input[type="number"]:focus, form input[type="password"]:focus, form input[type="search"]:focus, form input[type="tel"]:focus, form input[type="text"]:focus, form input[type="time"]:focus, form input[type="url"]:focus, form input[type="week"]:focus, form textarea:focus, form input[type="private"]:focus {
  outline: none; }
form input[type="submit"] {
  padding: 15px 30px;
  font-size: 28px;
  display: inline-block;
  background: #b7956f;
  color: #1A1919;
  border: 0;
  font-weight: bold;
  border-radius: 9px; }
  form input[type="submit"]:hover {
    background: #b18d64;
    margin-top: -2px; }

.rangeslider,
.rangeslider__fill {
  display: block; }

.rangeslider {
  background: #af895f;
  position: relative; }

.rangeslider--horizontal {
  height: 1px;
  width: 46%;
  margin: 20px auto 30px; }
  @media screen and (max-width: 863px) {
    .rangeslider--horizontal {
      width: 90%; } }

.rangeslider__fill {
  background: #af895f;
  position: absolute;
  top: 0;
  height: 100%; }

.rangeslider__handle {
  background: #af895f;
  cursor: pointer;
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 100%;
  position: absolute;
  top: -6px;
  touch-action: pan-y;
  -ms-touch-action: pan-y; }
  @media screen and (max-width: 863px) {
    .rangeslider__handle {
      width: 25px;
      height: 25px;
      top: -12px; } }

.rangeslider__value-bubble {
  display: block;
  padding: 4px;
  color: #FFF;
  font: 14px/20px "AvenirReg", Helvetica, Arial, sans-serif;
  background: #af895f;
  position: absolute;
  bottom: 100%;
  margin-bottom: 25px;
  width: 100px;
  margin-left: -50px;
  text-align: center; }
  .rangeslider__value-bubble:before, .rangeslider__value-bubble:after {
    border-width: 9px;
    border-style: solid;
    border-color: transparent;
    content: "";
    display: block;
    margin: auto;
    width: 10px;
    position: absolute;
    left: 0;
    right: 0; }
  .rangeslider__value-bubble:before {
    border-bottom-width: 0;
    bottom: -10px; }
  .rangeslider__value-bubble:after {
    border-top-color: #af895f;
    border-bottom-width: 0;
    bottom: -9px; }

.carousel {
  margin: 0 -60px;
  color: #FFF; }
  .carousel .text {
    max-width: 940px;
    margin: 0 auto; }
    .carousel .text h5, .carousel .text h4, .carousel .text h3, .carousel .text p {
      padding-right: 40%; }
  .carousel .slick div.slide {
    background-size: cover;
    background-position: bottom right;
    height: 650px; }
    .carousel .slick div.slide div.overlay {
      padding: 70px 65px;
      background: rgba(17, 42, 61, 0.9);
      width: 100%;
      height: 100%; }
  .carousel p {
    margin-bottom: 35px; }
  .carousel h3 {
    font: 45px/55px "AvenirHeavy", Helvetica, Arial, sans-serif; }
  @media screen and (max-width: 863px) {
    .carousel {
      padding: 10px 0 20px 0;
      margin: 0 -20px;
      text-align: center; }
      .carousel .text h5, .carousel .text h4, .carousel .text h3, .carousel .text p {
        padding-right: 0; }
      .carousel .slick div.slide {
        height: 600px; }
        .carousel .slick div.slide div.overlay {
          padding: 20px 20px;
          background: #173851; }
      .carousel h3 {
        font: 30px/36px "AvenirHeavy", Helvetica, Arial, sans-serif; }
      .carousel p {
        font-size: 15px; } }

.slick-prev,
.slick-next {
  position: absolute;
  z-index: 9999;
  display: block;
  height: 25px;
  width: 25px;
  background-size: 25px 25px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  color: #FFF;
  top: 50%;
  margin-top: -10px\9;
  /*lte IE 8*/
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    color: #FFF; }
  .slickquote .slick-prev, .slickquote
  .slick-next {
    height: 27px;
    width: 23px;
    background-size: 23px 27px; }
  @media screen and (max-width: 863px) {
    .slick-prev,
    .slick-next {
      top: auto;
      bottom: 12px; }
      .slickquote .slick-prev, .slickquote
      .slick-next {
        top: 50%;
        height: 17px;
        width: 15px;
        background-size: 15px 17px; } }

.slick-prev {
  background: url(https://statesofmatter.com/svg/previous.svg) no-repeat;
  left: 20px; }
  .slickquote .slick-prev {
    background: url(https://statesofmatter.com/svg/triangle-left.svg);
    left: 20px; }
  @media screen and (max-width: 863px) {
    .slickquote .slick-prev {
      left: 10px;
      background-size: 15px 17px; } }

.slick-next {
  right: 20px;
  background: url(https://statesofmatter.com/svg/next.svg) no-repeat; }
  .slickquote .slick-next {
    background: url(https://statesofmatter.com/svg/triangle-right.svg);
    right: 20px; }
  @media screen and (max-width: 863px) {
    .slickquote .slick-next {
      right: 10px;
      background-size: 15px 17px; } }

.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: 16px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 9px;
    width: 9px;
    margin: 0 4px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li.slick-active button {
      background: #FFF; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 9px;
      width: 9px;
      border: 2px #FFF solid;
      outline: none;
      color: transparent;
      padding: 2px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }

@media screen and (max-width: 1090px) {
  h6 .flag {
    display: inline;
    margin: 0 10px 0 -70px; }

  .tldr .flag {
    display: none; } }
@media screen and (max-width: 863px) {
  h6 .flag {
    margin: 0 10px 0 -20px; }

  .body_about .tinted {
    margin-top: 40px;
    margin-bottom: 40px; }
  .body_about .where h3, .body_about .criteria h3 {
    font-size: 20px; }
  .body_about .where {
    padding-top: 70px;
    padding-bottom: 30px; }
  .body_about .where h3 {
    margin-bottom: 10px; }
  .body_about .grid > h3 {
    padding: 20px 0 20px 0;
    font-size: 20px;
    margin-left: 0; }
  .body_about .testimonial h3 {
    margin-bottom: 20px;
    font-size: 20px; } }
.no-mobile {
  display: inline-block; }
  @media screen and (max-width: 863px) {
    .no-mobile {
      display: none; } }

.mobile-only {
  display: none; }
  @media screen and (max-width: 863px) {
    .mobile-only {
      display: inline-block; } }

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