/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, svg {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* TOKENS */

:root {
 
  /* COLOR */
  --color-primary: #444;
  --color-secondary: #e94f37;
  --color-text: #444;
  --color-gray: #888;
  --color-background: #f9f9f9;
  --color-border: #ccc;

  /* CONTENT BOX */
  --border-box-size: .5px;
  --border-box-style: solid;
  --border-box-radius: 8px;
  --color-box-background: #fff;
  --shadow-box: 0 8px 24px rgba(0,0,0,0.08);

  /* BUTTON */
  --color-button-text-hover: #e5e5e5;
  --color-button-hover: #444;
  --color-button-border: #444;
  --border-button-size: 1px;
  --border-radius-button: 4px;

  /* IMAGE */
  --border-image-radius: 8px;
  --shadow-image: drop-shadow(5px 5px 15px rgba(0,0,0,.5));

  /* TEXT */

  /* Body */
  --font-family-body: 'Inter', Arial, Helvetica, sans-serif;
  --font-size-body: 1.1rem;
  --font-weight-body: 300;
  --font-line-height-body: 1.65em;

  /* Large */
  --font-size-large: 1.25rem;
  --font-line-height-large: 1.9rem;

  /* Small */
  --font-size-small: 0.875rem;
  --font-line-height-small: 1.35rem;

  /* Body (Mobile) */
  --font-size-body-mobile: 1.2rem;

  /* Header */
  --font-family-header: 'Playfair Display', Times New Roman, serif;
  --font-weight-header: 300;

  /* H1 */
  --font-size-h1: 2.1rem;
  --line-height-h1: 2.6rem;
  /* H2 */
  --font-size-h2: 1.4rem;
  --line-height-h2: 2rem;
  /* H3 */
  --font-size-h3: 1.4rem;
  --line-height-h3: 1.45rem;

  /* STYLE */

  /* Misc */
  --border-divider-style: dotted;

  /* Menu */
  --bar-bg: #f0efdf;

/* DARK MODE */
[data-theme="dark"] {
  /*--color-bg: #121212;*/
  }
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--font-line-height-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text);
  background: url('../img/human-anatomy.png') no-repeat var(--color-background);
  background-size: 25%;
  background-position: 0 80px;
}
.large {
  font-size: var(--font-size-large);
  line-height: var(--font-line-height-large);
}
ol, ul {
  list-style: none;
}
/*blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: var(--color-secondary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
strong.highlight {
  background-color: rgba(255,83,6, .2);
  font-weight: 400 !important;
}
em {
  font-style: italic;
}
.middle {
  text-align: center;
}
.right {
  text-align: right;
}
.userTesting {
  margin: 0 auto;
  text-align: center;
}
.userTesting ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.userTesting li {
  /*flex-basis: auto;
  flex: 1 0 150px;*/
}
.userTesting img {
  max-width: 200px;
}
.clear {
  clear: both;
}
/* ---- RESET END ------*/

.homeGrid {
  display: grid;
  max-width: 1280px;
  min-height: calc(100vh - 188px);
  margin: 0 auto;
  padding: 4.5em 2em 3em;
  grid-template-columns: 1fr 440px;
  grid-auto-rows: max-content;
  grid-gap: 0px 120px;
  grid-template-areas:
    "main rightCol";
}
.main {
  grid-area: main;
}
.rightCol {
  grid-area: rightCol;
  padding-top: 1.5em;
}
.workGrid {
  display: grid;
  max-width: 1280px;
  min-height: calc(100vh - 188px);
  margin: 0 auto;
  padding: 4.5em 2em 3em;
  grid-template-columns: 50% 50%;
  /*grid-template-columns: 1fr 700px;*/
  grid-auto-rows: max-content;
  grid-gap: 75px 75px;
  grid-template-areas:
    "hero hero"
    "heroBlurb heroBlurb"
    "roleBoxLeft roleBoxRight"
    "outcome outcome"
    "liftCol lift"
    "origin originCol"
    "problem problemCol"
    "solutionCol solution"
    "prototype prototypeCol"
    "quoteBox quoteBox"
    "subscribe subscribe";
}
ul.workCta {
  display: flex;
  align-items: center;
  flex-direction: row;
  list-style-type: none;
  margin-top: -80px;
}
ul.workCta li:first-child {
  margin: 0 4em 0 12.5em;
}
.contentBox {
  background: var(--color-box-background);
  border: var(--border-box-size) var(--border-box-style) var(--color-border);
  border-radius: var(--border-box-radius);
  box-shadow: var(--shadow-box);
  padding: 1.4em;
}
.roleBoxRight {
  grid-area: roleBoxRight;
}
.roleBoxLeft {
  grid-area: roleBoxLeft;
}
/*.myRole {
  padding: .3em .3em .3em 1em;
}*/
.hero {
  grid-area: hero;
}
.heroBlurb {
  grid-area: heroBlurb;
  margin-top: -2em;
}
.heroBlurb h2 {
  padding: 0 4em;
}

/* ---- Button Start -----*/
a.animated-button:link, a.animated-button:visited {
  position: relative;
  display: block;
  padding: .7em;
  border-radius: var(--border-radius-button);
  font-size: var(--font-size-body);
  color: var(--color-primary);
  text-decoration: none;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
  content: "";
  position: absolute;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 150%;
  z-index: -1;
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
  color: var(--color-button-text-hover);
  text-shadow: none;
  border: var(--border-button-size) var(--border-box-style) var(--color-border);
  background: var(--color-button-hover);
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
  height: 450%;
}
a.animated-button.victoria-one {
  border: var(--border-button-size) var(--border-box-style) var(--color-button-border);
  font-size: var(--font-size-body);
  padding: .7em .9em;
}
a.animated-button.victoria-one:after {
  background: var(--color-button-hover);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.portfolioButt {
  max-width: 10em;
}
input[type=submit], input[type=submit]:visited, input[type=submit]:active {
  background: var(--color-box-background);
  border-radius: var(--border-radius-button);
  border: var(--border-button-size) var(--border-box-style) var(--color-button-border);
  padding: .7em;
  font-size: var(--font-size-body);
  color: var(--color-primary);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s;
}
input[type=submit]:hover {
  color: var(--color-button-text-hover);
  background: var(--color-button-hover);
  border: var(--border-button-size) var(--border-box-style) var(--color-button-border);
  cursor: pointer;
}

/* ---- Button End -----*/

.subscribe {
  grid-area: subscribe;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.quoteBox {
  grid-area: quoteBox;
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
  padding: 1.25em 0 .75em;
}
.origin {
  grid-area: origin;
}
.originCol {
  grid-area: originCol;
}
.prototype {
  grid-area: prototype;
}
.prototypeCol {
  grid-area: prototypeCol;
}
.problem {
  grid-area: problem;
}
.problemCol {
  grid-area: problemCol;
}
.solution {
  grid-area: solution;
}
.solutionCol {
  grid-area: solutionCol;
}
.outcome {
  grid-area: outcome;
}
/*.outcomeCol {
  grid-area: outcomeCol;
}*/
.lift {
  grid-area: lift;
}
.liftCol {
  grid-area: liftCol;
}
.lift ul {
  list-style: disc;
  padding-left: 1em;
}
.workGrid img {
  border-radius: var(--border-image-radius);
}
img.imgShadow {
  -webkit-filter: var(--shadow-image);
  filter: var(--shadow-image);
}
header {
  width: 100%;
  position: fixed;
  z-index: 5;
  background: url('../img/stay-human-bg.png') rgba(0,0,0, .9) center center no-repeat;
  background-size: 100% 100%;
}
.logo {
  max-width: 260px;
  height: auto;
  display: block;
}
.logoNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logoNav li:first-child {
  position: relative;
  z-index: 4;
}
.title {
  font-family: var(--font-family-body);
  color: rgba(255,255,255,.25);
  font-weight: 200;
  font-size: 1.3em;
  letter-spacing: .18rem;
  text-transform: uppercase;
/*  mix-blend-mode: overlay;*/
}
footer {
  width: 100%;
  background: url('../img/stay-human-bg.png') rgba(0,0,0, .9
  ) center center no-repeat;
  background-size: 100% 100%;
  color: rgba(255,255,255,.25);
  padding: .5em 0;
}
.footerText {
  min-width: 376px;
  font-size: .7em;
  line-height: 1.3em;
  font-weight: 300;
  color: rgba(255,255,255,.5);
}
ul.footerContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
footer ul .socialCol {
  display: flex;
  justify-content: left;
  align-items: center;
  flex-direction: row;
}
footer ul .socialCol li {
  margin-right: 1.5em;
  height: 30px;
}
.footerText {
  text-align: right;
}
.footerText img {
  display: inline-block;
  max-width: 12px;
}
.socialIcon {
  fill: #e85037;
  /*fill: rgba(233,79,55,.8);*/
}

/* Sliding Underline Nav */

nav {
    font-family: var(--font-family-body);
    font-weight: 300;
    position: relative;
}
nav .line {
    height: 2px;
    position: absolute;
    bottom: 0;
    /*margin: 4px 0 0 0;*/
    background: var(--color-secondary);
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
}
nav ul li {
    margin: 0 40px 0 0;*/
    opacity: .4;
    margin-right: 1.5em;
    font-size: 1.15rem;
    color: rgba(255,255,255,.25);
    /*padding: .1em;*/
    transition: all 0.4s ease;
}
/*nav ul li:hover {
    opacity: .7;
}*/
nav ul li a.active {
    color: var(--color-secondary);
}
nav ul li:last-child {
    margin-right: 0;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
}

/*#myLinks {
  display: block;
}*/
/* For add JS class on window resize */
/*#myLinks.show {
  display: block;
}*/

/* Mobile Hamburger Menu */
.hamburger-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  display: none; /* Hidden by default for larger screens */
  cursor: pointer;
}
.hamburger-menu .menu-icon {
  transform: scale(1.1);
}

.menu-icon {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.menu-icon .menu-icon__cheeckbox {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  z-index: 2;
  -webkit-touch-callout: none;
  position: absolute;
  opacity: 0;
}
.menu-icon div {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 12px;
}
.menu-icon span {
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--bar-bg, #000);
  border-radius: 1px;
  transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}
.menu-icon span:first-of-type {
  top: 0;
}
.menu-icon span:last-of-type {
  bottom: 0;
}
.menu-icon.active span:first-of-type,
.menu-icon .menu-icon__cheeckbox:checked + div span:first-of-type {
  transform: rotate(45deg);
  top: 5px;
}
.menu-icon.active span:last-of-type,
.menu-icon .menu-icon__cheeckbox:checked + div span:last-of-type {
  transform: rotate(-45deg);
  bottom: 5px;
}
.menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:first-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:last-of-type {
  width: 24px;
}
/*@media (min-width: 1024px) {*/
  .menu-icon:hover span:first-of-type {
    width: 24px;
  }
  .menu-icon:hover span:last-of-type {
    width: 24px;
  }
/*}*/



/* Original Nav */
.hfContainer {
  max-width: 1280px;
  padding: .25em 2em;
  margin: 0 auto;
}
.accent {
  color: #999;
}
blockquote {
  /*font-family: 'Playfair Display', Georgia, serif;*/
  font-style: italic;
  text-align: center;
  font-size: .9em;
  line-height: 1.65em;
}
.rightCol blockquote {
  border-left: 1px dotted #ccc;
  border-top: none;
  padding-left: 1.7em;
}
.quoteBox blockquote {
  padding: 3em 8em 1em;
  /*border-top: 1px dotted #ccc;*/
}
blockquote::before {
  content: '“';
  font-family: var(--font-family-header);
  font-weight: 500;
  font-style: italic;
  font-size: 6.5em;
  color: var(--color-gray);
  display: block;
}
.blurbTitle {
  font-style: italic;
  font-size: .9em;
  line-height: 1.4em;
  display: block;
  margin-top: -.2em;
  color: var(--color-gray);
}
.blurbTitle.textRight {
  text-align: center;
  margin-top: 0;
}
blockquote img {
  -webkit-clip-path: circle(36px at center);
  clip-path: circle(36px at center);
  margin: .75em auto;
  display: block;
}
h1 {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-header);
  font-size: var(--font-size-h1);
  color: var(--color-text);
  line-height: var(--line-height-h1);
}
h2 {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-header);
  font-size: var(--font-size-h2);
  color: var(--color-text);
  line-height: var(--line-height-h2);
  margin: .5em 0;
}
h3 {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-header);
  font-size: var(--font-size-h3);
  color: var(--color-text);
  line-height: var(--line-height-h3);
}
/*img.profile {
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 20%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 20%);
  max-width: 600px;
}*/
img.profile {
  max-width: 500px;
  width: 100%;
  /*clip-path: circle(48% at 50% 50%);*/
  /*clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);*/
  /*clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  max-width: 500px;*/
}
strong {
  font-weight: 700;
}
.emphasis {
  font-size: 1.2em;
}
figcaption {
  font-size: .8em;
  font-style: italic;
  color: var(--color-gray);
  margin: 0 auto;
  text-align: center;
  max-width: 60%;
  line-height: 1.4em;
}
input[type=text], textarea, #mc_embed_signup .mc-field-group input {
  min-width: 85%;
  padding: .7em;
  border: 0;
  -webkit-border-radius:0; 
  border-radius:0;
  color: var(--color-text);
  border-bottom: 1px solid #333;
  border-top: .5px solid #666;
  box-shadow: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  margin-bottom: .6em;
  background: rgba(255,255,255,.5);
}
#mc_embed_signup .mc-field-group input {
  margin-bottom: 0 !important;
}
input[type=text]:focus, textarea:focus, #mc_embed_signup .mc-field-group input:focus {
  border: 0;
  border-bottom: 2px solid #122B3E;
  border-top: .5px solid #666;
  background: rgba(255,255,255,1);
  outline: none;
}
input::placeholder, textarea::placeholder, #mc_embed_signup .mc-field-group input::placeholder {
  color: #aaa;
}
#thankYou, #thankYou img {
  width: 100%;
  height: auto;
}

/*----- VALIDATE FORM --------*/

#message {
  padding: 0px 40px 0px 0px; 
}

#mail-status {
  max-width: 44%;
  display:none; 
  font-size: .8em;
  color: #d12910;
}

.error {
/*  background-color: #F7902D;*/
  margin-bottom: 40px;
}

.success {
  background-color: #48e0a4;
}

.g-recaptcha {
  margin: 0 0 25px 0;
}

/*-----VALIDATE FORM LEGACY --------*/

#email_validation, #name_validation {
    display: none;
}
label {
  color: var(--color-primary);
  font-size: .8em;
}
label.required:after {
  content: '*';
  color: red;
}
span.error {
  background-color: #FFDFDF;
  color: red;
  font-size: .8em;
}
span.error input {
  border: 1px solid red;
}
/*.row {
  margin: 5px 0;
}*/

.form-group {
  margin: 5px 0;
}


/*------MAILCHIMP----------*/

#mc_embed_signup {
  padding: .25em;
  margin-top: 1.75em;
}
body.workPage #mc_embed_signup {
  margin-top: 0;
}
.mce_inline_error {
  background: inherit;
}
.subscribeForm {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1.5em;
}
#mc_embed_signup input[type=submit] {
  margin: 0 0 0 .35em;
}
#mc_embed_signup p.small {
  font-size: .75em;
  line-height: 1.4em;
  color: #666;
}
/*#mc_embed_signup_scroll p:first-child {
  font-family: 'Playfair Display', serif;
  color: #0d273b;
  font-size: 1.2em;
}*/
iframe #rc-anchor-container .rc-anchor-light {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* MC Provided */

/* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 */
 #mc_embed_signup form {
    display:block;
     position:relative;
     text-align:left;
     margin: 20px
}
 #mc_embed_signup h2 {
    font-weight:bold;
     padding:0;
     margin:15px 0;
     font-size:1.4em;
}
 #mc_embed_signup .button {
    clear:both;
     background-color: var(--color-box-background);
     border: 0 none;
     border-radius: var(--border-radius-button);
     transition: all 0.23s ease-in-out 0s;
     color: #FFFFFF;
     cursor: pointer;
     display: inline-block;
     font-size:15px;
     font-weight: normal;
     height: 32px;
     line-height: 32px;
     margin: 0 5px 10px 0;
     padding: 0 22px;
     text-align: center;
     text-decoration: none;
     vertical-align: top;
     white-space: nowrap;
     width: fit-content;
     width: -moz-fit-content;
}
 #mc_embed_signup .button:hover {
    background-color:#333;
}
 #mc_embed_signup .small-meta {
    font-size: 11px;
}
 #mc_embed_signup .nowrap {
    white-space:nowrap;
}
 #mc_embed_signup .size1of2 {
    clear:none;
     float:left;
     display:inline-block;
     width:46%;
     margin-right:4%;
}
 * html #mc_embed_signup .size1of2 {
    margin-right:2%;
    /* Fix for IE6 double margins. */
}
 #mc_embed_signup .mc-field-group label {
    display:block;
     margin-bottom:3px;
}
/* Input Form */
 #mc_embed_signup .mc-field-group input {
    padding: .7em;
    /*padding-inline: 0;
    padding-block: 0;*/
    font-size: var(--font-size-body);
}
/* Input Form */
 #mc_embed_signup #mce-success-response {
  font-size: .8em;
  line-height: 1.5em;
  font-weight: normal;
  padding: .25 0 1em;
}
/* Lloyd Christmas gif */
#successImg {
  max-width: 440px;
  margin: 0 auto;
}
#successImg img {
  width: 100%;
  height: auto;
}
 #mc_embed_signup div#mce-responses {
    float:left;
     top:-1.4em;
     padding:0em .5em 0em .5em;
     overflow:hidden;
     width:90%;
     margin: 0 5%;
     clear: both;
}
 #mc_embed_signup div.response {
     margin:1em auto;
     padding:1em .5em .5em 0;
     top:-1.5em;
     color: #666;
     line-height: 1.5em;
     font-size: .8em;
     z-index:1;
     width:80%;
}
 #mc_embed_signup #mce-error-response {
    display:none;
}
 #mc_embed_signup #mce-success-response {
    color:#529214;
     display:none;
}
 #mc_embed_signup label.error {
    display:block;
     float:none;
     width:auto;
     margin-left:1.05em;
     text-align:left;
     padding:.5em 0;
}
 #mc_embed_signup .helper_text {
    color: #8d8985;
     margin-top: 2px;
     display: inline-block;
     padding: 3px;
     background-color: rgba(255,255,255,0.85);
     -webkit-border-radius: var(--border-radius-box);
     -moz-border-radius: var(--border-radius-box);
     border-radius: var(--border-radius-box);
     font-size: 14px;
     font-weight: normal;
     z-index: 1;
}
 #mc_embed_signup #num-subscribers {
    font-size:1.1em;
}
 #mc_embed_signup #num-subscribers span {
    padding:.5em;
     border:1px solid #ccc;
     margin-right:.5em;
     font-weight:bold;
}
 #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    display:inline-block;
     padding:3px;
     background-color:rgba(255,255,255,0.85);
     -webkit-border-radius: var(--border-radius-box);
     -moz-border-radius: var(--border-radius-box);
     border-radius: var(--border-radius-box);
     font-size:14px;
     font-weight:normal;
     z-index:1;
     color:#e85c41;
     text-indent: 4%;
     display: none !important;
}
 #mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
    border:2px solid red;
     border-radius: 0;
}

/*---------------------*/
/*   MEDIA QUERIES */
/*---------------------*/


@media only screen  
  and (max-width: 1300px) {
    ul.workCta {
      flex-direction: column;
      margin-top: -90px;
    }
    ul.workCta li:first-child {
      margin: 0;
      margin-bottom: 1.2em;
    }
    nav {
      display: block;
    }
    .workGrid {
    grid-template-columns: minmax(320px, 1fr);
    grid-template-areas:
      "hero hero"
      "heroBlurb heroBlurb"
      "roleBoxLeft roleBoxRight"
      "outcome outcome"
      "liftCol liftCol"
      "lift lift"
      "problemCol problemCol"
      "problem problem"
      "solutionCol solutionCol"
      "solution solution"
      "prototypeCol prototypeCol"
      "prototype prototype"
      "quoteBox quoteBox"
      "subscribe subscribe";
    padding: 4em 1.5em 0em;
    grid-gap: 50px 75px;
  }
  #mc_embed_signup {
    margin-bottom: 2.5em;
  }
}

@media only screen  
  and (max-width: 984px) {
  .homeGrid {
    grid-template-columns: minmax(320px, 1fr);
    grid-template-areas:
      "main"
      "rightCol";
    padding: 4em 1.5em 2em;
  }
  .hfContainer {
    padding: 0 2em;
  }
  .hamburger-menu {
      display: block; /* Show on mobile screens */
      position: relative;
      z-index: 2;
    }
  #myLinks {
    display: none;
  }
  .logoNav {
    align-items: normal;
  }
  nav {
    font-size: 1.3em;
    line-height: 2em;
    position: absolute;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background: #181818;
  }
  nav ul {
    flex-direction: column;
    align-items: center;
    margin-top: 3.5em;
  }
  nav ul li {
    margin-right: 0;
  }
  nav ul li:last-child {
    margin-left: 0;
  }
  ul.workCta {
      margin-top: -70px;
    }
  .blurbTitle.textRight {
    text-align: center;
  }
  .title {
    display: none;
  }
  .workGrid {
    grid-template-columns: minmax(320px, 1fr);
    grid-template-areas:
      "hero"
      "heroBlurb"
      "roleBoxLeft"
      "roleBoxRight"
      "outcome"
      "liftCol"
      "lift"
      "problemCol"
      "problem"
      "solutionCol"
      "solution"
      "prototypeCol"
      "prototype"
      "quoteBox"
      "subscribe";
    padding: 4em 1.5em 0em;
    grid-gap: 50px 75px;
  }
.origin figure {
  width: 100%;
  padding: 0;
  }
  .quoteBox blockquote {
    padding: 2em 0 0;
  }
  .rightCol {
      text-align: center;
  }
  .footerText {
    text-align: center;
  }
  blockquote {
    border-left: none;
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 1px dotted #ccc;
    padding-top: 3em;
  }
  body.contactPage blockquote {
    padding: 0;
    border: 0;
  }
  body.workPage blockquote {
    border: 0;
  }

  .heroBlurb {
    margin-top: -.9em;
  }
  .heroBlurb h2 {
    font-size: 1.1em;
  }
  figcaption {
    max-width: 90%;
  }
  footer {
  width: 100%;
  padding: .5em 0;
  }
footer ul .footerContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  }
footer ul .socialCol {
  display: flex;
  justify-content: left;
  align-items: center;
  flex-direction: row;
  }
footer ul .socialCol li {
  margin-right: 1.5em;
  height: 30px;
  }
.footerText {
  font-size: .7em;
  color: rgba(255,255,255,.5);
  line-height: 1.3em;
  text-align: right;
  }
  .footerText img {
    display: inline-block;
    max-width: 12px;
  }
  #mc_embed_signup_scroll {
    text-align: center;
  }
  #mc_embed_signup {
    margin-bottom: 2.5em;
  }
  .subscribeForm {
    flex-direction: column;
    justify-content: center;
  }
  #mc_embed_signup input[type=submit] {
  margin: .5em 0 0 .35em;
  }
}

/*---------------------*/

@media only screen 
  and (min-width: 415px)
  and (max-width: 784px) {

    body {
      background-size: 50%;
      background-position: 0 130px;
    }
    ul.workCta {
      margin-top: -30px;
    }
    header .hfContainer {
      padding: 0 1em;
    }
  .logoNav {
    flex-direction: row;
  }
  .workGrid, .homeGrid {
    padding-top: 4em;
  }
  body.contactPage blockquote {
    padding: 0;
    border: 0;
  }
  .rightCol {
    margin-top: 3em;
    padding-top: 3em;
    border-top: 1px dotted #ccc;
  }
  .heroBlurb h2 {
    padding: 0;
  }
  body {
    font-size: var(--font-size-body-mobile);
  }
  nav {
    padding: 0;
    margin: 0 auto;
  }
  nav ul {
    justify-content: center;
  }
  /*nav ul li {
    margin-left: 1em;
  }
  nav ul li:first-child {
    margin-left: 0;
  }*/
/*  #myLinks {
    display: block;
  }*/
  a.animated-button.victoria-one {
    padding: .5em .7em;
  }
  header {
    text-align: center;
  }
  input[type=text], textarea {
  min-width: 92%;
  }
  .title {
    display: none;
  }
  ul.footerContent {
    flex-direction: column;
  }
  ul.socialCol {
    padding-bottom: 1em;
    justify-content: center;
  }
  ul.socialCol li:last-child {
    margin-right: 0;
  }
  #mc_embed_signup_scroll {
    text-align: center;
  }
  #mc_embed_signup {
    margin-bottom: 2.5em;
  }
  .subscribeForm {
    flex-direction: column;
    justify-content: center;
  }
}

/*---------------------*/

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

    body {
      background-size: 50%;
      background-position: 0 130px;
    }
    ul.workCta {
      margin-top: 0;
    }
  .homeGrid, .workGrid {
    grid-gap: 30px 75px;
    padding: 7em 1em .75em;
  }
  .rightCol {
    margin-top: 3em;
    padding-top: 3em;
    border-top: 1px dotted #ccc;
  }
  .logoNav {
    flex-direction: column;
  }
  .quoteBox {
    padding-bottom: .25em;
  }
  h1 {
    font-size: 1.7em;
  }
  .heroBlurb h2 {
    padding: 0;
  }
  nav {
    width: 100%;
    margin-top: -6px;
  }
  nav ul {
    display: block;
    justify-content: center;
  }
  nav ul li, footer nav ul li {
    display: inline-block;
    margin-left: 0;
    font-size: 1em;
  }
  a.animated-button.victoria-one {
    padding: .6em;
  }
  .logo {
    margin-top: 6px;
    max-width: 90%;
    margin-right: 0;
  }
  .grid {
    padding-top: 4em;
  }
  .hfContainer {
    padding: .25em 1em !important;
    text-align: center;
  }
  .footerText {
    text-align: center;
    margin-bottom: .75em;
    font-size: .65em;
  }
  footer ul .footerContent {
    padding-bottom: 1em;
  }
  input[type=text], textarea {
  min-width: 90%;
}
ul.footerContent {
    flex-direction: column;
  }
  ul.socialCol {
    padding-bottom: 1em;
    justify-content: center;
  }
  ul.socialCol li:last-child {
    margin-right: 0;
  }
  #mc_embed_signup_scroll {
    text-align: center;
  }
  #mc_embed_signup {
    margin-bottom: 2.5em;
  }
  .subscribeForm {
    flex-direction: column;
    justify-content: center;
  }

}