/* ---- SITE ---- */

  @font-face {
      font-family: 'gordita';
      src: url('fonts/gorditaregular-webfont.woff2');
      font-weight: 500;
      font-style: normal;
  }
  @font-face {
      font-family: 'gordita';
      src: url('fonts/gorditamedium-webfont.woff2');
      font-weight: 600;
      font-style: normal;
  }
  @font-face {
      font-family: 'gordita';
      src: url('fonts/gorditabold-webfont.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
  }
  @font-face {
      font-family: 'gordita';
      src: url('fonts/gorditaregularitalic-webfont.woff2') format('woff2');
      font-weight: 500;
      font-style: italic;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    --fvv-white: rgb(254, 254, 254);
    --fvv-black: rgb(46, 46, 43);
    --fvv-black-05: rgba(46, 46, 43, 0.5);
    --fvv-lightgray: rgb(242, 242, 242);
    --fvv-mediumgray: rgb(214, 214, 214);
    --fvv-darkgray: rgb(86, 86, 86);
    --fvv-highlight: rgb(249, 66, 58);
    --fvv-highlight-02: rgb(249, 66, 58, 0.2);
    --fvv-border-radius: 0.25em;
  }
  html {
    overflow-y: scroll;
    scroll-behavior: smooth;
  }
  body {
    font-family: Gordita, serif; /* change to sans-serif when finished */
    font-size: 16px;
    font-weight: normal;
    line-height: 2em;
    color: var(--fvv-darkgray);
    background: var(--fvv-white);
  }
  nav {
    display: block;
    overflow: hidden;
    padding: 1em 2em 1em;
    margin: auto;
    max-width: 1376px;
    text-transform: uppercase;
  }
    .navicon {
      display: none;
      position: absolute;
    }
    #navlist {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #navlist > li {
      float: left;
      line-height: 4em;
    }
    #navlist > li >  a {
        display: block;
        margin-right: 2rem;
        font-size: 1.25em;
        letter-spacing: 0.0625rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--fvv-black);
      }
    #navlist > li >  a.engaged {
        color: var(--fvv-highlight);
      }
  .contentwrapper {
    padding: 0em 2em 2em;
    margin: auto;
    max-width: 1376px;
  }
  p {
    margin-top: 0;
    margin-bottom: 0.5em;
  }
  h1 {
    font-size: 1rem;
    letter-spacing: 0.03125rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: var(--fvv-black);
    text-transform: uppercase;
  }
  h2 {
    font-size: 1rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--fvv-white);
  }
  h3 {
    font-size: 1rem;
    line-height: 2.25rem;
    letter-spacing: 0.03125rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fvv-black);
  }
  h4 {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 600;
  }
  a {
    color: var(--fvv-highlight)
  }
  video {
    max-width: 100%;
  }
  .link-button {
    display: inline-block;
    width: 17em;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.0125em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    line-height: 2.5em;
    height: 2.75em;
    background: var(--fvv-white);
    border: var(--fvv-highlight) 2px solid;
    color: var(--fvv-highlight);
    border-radius: var(--fvv-border-radius);
    cursor: pointer;
  }
  .link-button:active {
    background: var(--fvv-highlight);
    color: var(--fvv-white);
    border: var(--fvv-highlight) 2px solid;
    line-height: 2.5em;
  }
    .link-button .link-arrow {
      display: inline-block;
      background: url(../images/icon-arrow-right-red.svg) no-repeat;
      vertical-align: middle;
      width: 1.1875em;
      height: 1em;
      margin-left: 0.5em;
    }
    .link-button:active .link-arrow {
      background: url(../images/icon-arrow-right.svg) no-repeat;
    }
  .link-button.engaged {
    background: var(--fvv-highlight);
    color: var(--fvv-white);
  }
  .link-button.engaged:active {
    background: var(--fvv-white);
    border: var(--fvv-highlight) 2px solid;
    color: var(--fvv-highlight);
  }
  .highlight {
    color: var(--fvv-highlight);
  }
  .inlineheading {
    font-weight: 600;
  }
  .icon-text {
    display: grid;
    grid-template-columns: 1.375em auto;
    grid-template-rows: max-content max-content;
    grid-column-gap: 0.75em;
  }
    .icon-text > img {
      justify-self: center;
      align-self: start;
      padding-top: 0.5em;
    }
    .icon-text > p {
      grid-column: 2;
      align-self: start;
      display: block;
    }
    @media (max-width: 413px) {
      .icon-text {
        grid-template-columns: auto;
        grid-template-rows: max-content max-content;
        grid-row-gap: 1em;
      }
      .icon-text > img {
        justify-self: center;
        align-self: start;
        padding-top: 0;
      }
      .icon-text > h3 {
        text-align: center;
      }
      .icon-text > p {
        grid-column: auto;
        text-align: center;
      }
    }

/* ---- SITE-WIDE MEDIA QUERIES ---- */

@media (max-width: 767px) {
  nav {
    padding: 0em 1em;
    margin-bottom: 0em;
    background-color: var(--fvv-white);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    box-shadow: 0px 1px 2px 0px var(--fvv-black-05);
  }
  nav:hover {
    cursor: pointer;
  }
  .navicon {
    display: block;
    top: 1.5em;
    pointer-events: none;
  }
  .navicon .engaged {
    fill: var(--fvv-highlight);
  }
  #navlist > li {
    float: none;
    text-align: center;
    width: 66.6%;
    margin: auto;
  }
  #navlist > li:last-child a {
    border-bottom: none !important;
  }
  #navlist > li >  a {
    display: block;
    margin: 0;
  }
  #navlist li a.engaged {
    pointer-events: none;
  }
  #navlist li a:not(.engaged) {
    display: none;
  }
  .navitem.visible {
    display: block !important;
    border-bottom: 1px solid var(--fvv-black-05);
  }
}

/* ---- PAGES ---- */

  /* Expertise */

  #expertise header {
    background-color: var(--fvv-black);
    color: var(--fvv-white);
  }
  #expertise header .contentwrapper {
    display: grid;
    grid-template-columns: max-content auto;
    padding-bottom: 0;
    margin-bottom: 6em;
  }
  #expertise header img {
    justify-self: start;
  }
  #expertise h1 {
    color: var(--fvv-white);
    margin-bottom: 0.375em;
    letter-spacing: 0.06225rem;
  }
  #expertise #intro {
    justify-self: center;
    align-self: center;
    text-align: left;
    max-width: 45em;
  }
  #expertise #intro .link-button {
    margin-top: 1em;
    width: 10em;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.0125em;
    text-transform: none;
    line-height: 1.75rem;
    height: 2rem;
    border: var(--fvv-highlight) 1px solid;
    background-color: inherit;
    color: var(--fvv-highlight);
    border-radius: var(--fvv-border-radius);
    cursor: pointer;
  }
  #expertise #intro .link-button:active {
    border: var(--fvv-highlight) 1px solid;
    background-color: var(--fvv-highlight);
    color: var(--fvv-white);
  }
  #expertise main .contentwrapper {
    display: grid;
    grid-template-columns: 41em auto;
    padding-bottom: 0;
  }
  #expertise #testimonials {
    padding-right: 4em;
  }
  #expertise #testimonials .main-carousel {
    max-width: 45em;
    margin: auto;
  }
  #expertise #testimonials .carousel-cell {
    width: 100%; /* full width */
    padding-bottom: 2em;
  }
  #expertise #testimonials br {
    margin-bottom: 0.25em;
  }
  #expertise #testimonials span {
    font-weight: 600;
    color: var(--fvv-highlight);
  }
  #expertise #about {
    justify-self: center;
    margin-bottom: 4em;
  }
  #expertise #about ul {
    max-width: 45em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
    grid-column-gap: 2em;
    grid-row-gap: 1.5em;
    list-style: none;
  }
  #expertise #about ul li {
    padding-left: 1em;
    background-image: url('../images/bullet.svg');
    background-position: 0 0.8em;
    background-repeat: no-repeat;
  }
@media (max-width: 1680px) {
  #expertise header .contentwrapper {
    margin-bottom: 4em;
  }
  #expertise header img {
    margin-right: 3em;
  }
  #expertise main .contentwrapper {
    grid-template-columns: 27em auto;
  }
}
@media (max-width: 1152px) {
  #expertise header .contentwrapper {
    margin-bottom: 2.5em;
  }
  #expertise header img {
    margin-right: 1em;
  }
  #expertise #intro {
    justify-self: start;
    margin-left: 2em;
  }
  #expertise main .contentwrapper {
    grid-template-columns: 25.0125em auto;
  }
  #expertise #testimonials {
    padding-right: 0;
  }
  #expertise #about {
    justify-self: start;
    margin-left: 2em;
  }
  #expertise #about ul {
    grid-template-columns: 1fr;
    grid-row-gap: 1em;
  }
}
@media (max-width: 1024px) {
  #expertise #intro {
    max-width: 30em;
  }
  #expertise #about {
    max-width: 32em;
  }
}
@media (max-width: 1023px) {
  #expertise #intro {
    margin-left: 0;
  }
  #expertise #about {
    margin-left: 0;
  }
  #expertise #testimonials {
    padding-right: 2em;
  }
}
@media (max-width: 767px) {
  #expertise header .contentwrapper {
    grid-template-columns: 1fr;
    padding: 4em 0 0;
    margin-bottom: 1.5em;
  }
  #expertise header img {
    align-self: end;
    width: 100%;
    margin: 0;
  }
  #expertise header #intro {
    grid-row: 1;
    align-self: start;
    max-width: none;
    padding: 1em;
  }
  #expertise main .contentwrapper {
    grid-template-columns: 1fr;
    padding: 0 1em;
  }
  #expertise main #about {
    margin-bottom: 1em;
  }
  #expertise #testimonials {
    grid-row: 2;
    padding: 2em 0 8em;
  }
}
@media (max-width: 767px) and (max-height: 768px) {
  #expertise header .contentwrapper {
    min-height: 100vh;
  }
}

  /* Process */

  #process h2 {
    line-height: 2.25rem;
    letter-spacing: 0.03125rem;
    text-transform: uppercase;
  }
  #process h3 {
    color: var(--fvv-highlight);
  }
  #process h4 {
    line-height: 2em;
    margin-bottom: 0.5em;
  }
  #process .thumb-text h4 {
    margin-bottom: inherit;
  }
@media (max-width: 767px) {
  #process header {
    margin-top: 4em;
  }
}
  #process header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    min-height: calc(100vh - 6.5em);
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.15);
  }
  #process header #intro {
    max-width: 32.25em;
    align-self: center;
    justify-self: center;
    padding: 2em;
  }
  #process header #ingredients {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    grid-gap: 1em;
    padding: 1em;
  }
  #process header #ingredients a {
    display: grid;
    grid-row-gap: 1em;
    text-decoration: none;
    background: var(--fvv-lightgray);
    border-radius: var(--fvv-border-radius);
  }
  #process header #ingredients a img {
    justify-self: center;
    align-self: end;
    margin-top: 1em;
  }
  #process header #ingredients a h2 {
    text-align: center;
    justify-self: center;
    align-self: start;
    margin-bottom: 1em;
    color: var(--fvv-highlight);
  }
@media (max-width: 1024px) {
  #process header {
    grid-template-columns: 1fr 2fr;
    min-height: calc(100vh - 9em);
  }
  #process header #intro {
    align-self: start;
  }
}
@media (max-width: 768px) {
  #process header {
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  }
  #process header #intro {
    max-width: none;
  }
}

  #process #research {
    min-height: 100vh;
  	background-image: radial-gradient(50% 50%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.00) 90%, rgba(0,0,0,0.05) 150%), url('process/images/research-size_1@1x.jpg');
    background-size: auto, cover;
    background-position: left top, center top;
    padding-top: 4em;
  }
  #process #research div.icon-text {
    min-height: calc(100vh - 8vh - 8em);
    grid-template-rows: max-content max-content auto;
  }
  #process #research p {
    max-width: 19.5em;
  }
  #process #research em {
    font-style: normal;
    font-weight: 600;
    color: var(--fvv-black);
  }
  #process #research #legend {
    grid-column: 2;
    align-self: end;
  }
  #process #research #legend h4 {
    line-height: 1rem;
    color: var(--fvv-black);
    margin-top: 0.25em;
  }
  #process #research #elements {
    display: none;
  }
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  #process #research {
    background-image: radial-gradient(50% 50%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.00) 90%, rgba(0,0,0,0.05) 150%), url('process/images/research-size_1@2x.jpg');
  }
}
@media (max-width: 2048px) {
  #process #research {
    background-image: radial-gradient(50% 50%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.00) 90%, rgba(0,0,0,0.05) 150%), url('process/images/research-size_2@1x.jpg');
    background-position: left top, center center;
    padding-top: 2em;
  }
}
@media (max-width: 2048px) and (min-resolution: 2dppx), (max-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
  #process #research {
    background-image: radial-gradient(50% 50%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.00) 90%, rgba(0,0,0,0.05) 150%), url('process/images/research-size_2@2x.jpg');
  }
}
@media (max-width: 1680px) {
  #process #research div.icon-text {
    min-height: calc(100vh - 8vh);
    grid-template-rows: max-content max-content auto;
  }
}
@media (max-width: 1023px) {
  #process #research {
    background-image: radial-gradient(50% 50%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.00) 90%, rgba(0,0,0,0.05) 150%), url('process/images/research-size_3-background@1x.jpg');
  }
  #process #research div.icon-text {
    min-height: auto;
  }
  #process #research p {
    max-width: none;
    text-align: left;
  }
  #process #research #elements {
    display: block;
    max-width: 100vw;
  }
}
@media (max-width: 1023px) and (min-resolution: 2dppx), (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 2) {
  #process #research {
    background-image: radial-gradient(50% 50%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.00) 90%, rgba(0,0,0,0.05) 150%), url('process/images/research-size_3-background@2x.jpg');
  }
}
@media (max-width: 413px) {
  #process #research #legend {
    grid-column: auto;
  }
}

  #process #ideation {
    display: grid;
    min-height: 100vh;
  }
    #process #ideation > div {
      align-self: center;
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      padding: 4em;
    }
      #process #ideation .description {
        min-width: 19.125em;
        max-width: 35.5em;
        margin-right: 4em;
      }
      #process #ideation .example {
        display: grid;
      }
      #process #ideation .example video {
        grid-column: 1 / span 1;
        max-width: 50.5em;
        box-shadow: 0px 1px 2px 0px var(--fvv-black-05);
      }
      #process #ideation .example div {
        grid-column: 2 / span 1;
        width: 16.5em;
        margin-left: 4em;
      }
@media (max-width: 1680px) {
    #process #ideation .description {
      max-width: 19.125em;
    }
      #process #ideation .example video {
        width: 100%;
      }
}
@media (max-width: 1312px) {
  #process #ideation .example video {
    grid-column: auto;
    grid-row: 1 / span 1;
    max-width: none;
  }
  #process #ideation .example div {
    grid-column: auto;
    grid-row: 2 / span 1;
    width: auto;
    margin: 3em 0 0 0;
  }
}
@media (max-width: 768px) {
  #process #ideation > div {
    flex-direction: column;
    padding: 2em;
  }
  #process #ideation .example {
    min-width: auto;
    max-width: none;
    margin-right: auto;
    margin-bottom: 2em;
  }
  #process #ideation .description {
    max-width: none;
    margin-right: auto;
    margin-bottom: 2em;
  }
}

  #process #informationarchitecture {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32em, 1fr));
    margin: auto;
    width: 100%;
    min-height: 100vh;
  	background-image: radial-gradient(50% 50%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.00) 90%, rgba(0,0,0,0.05) 150%);
    background-color: rgb(244, 244, 244);
    background-size: auto, cover;
    overflow: hidden;
  }
  #process #informationarchitecture .icon-text {
    justify-self: center;
    align-self: center;
    max-width: 46em;
    padding: 3em;
  }
  #process #informationarchitecture .overflowhidden {
    align-self: start;
    overflow: hidden;
  }
  #process #informationarchitecture .overflowhidden > img {
    height: calc(100vh - 4em);
  }
@media (max-width: 1023px) {
  #process #informationarchitecture {
    grid-template-columns: auto;
    grid-template-rows: max-content auto;
  }
  #process #informationarchitecture .overflowhidden {
    justify-self: center;
    grid-row: 1;
    max-height: 50vh;
  }
  #process #informationarchitecture .overflowhidden > img {
    max-height: 50vh;
  }
  #process #informationarchitecture .icon-text {
    max-width: 66vw;
  }
}
@media (max-width: 767px) {
  #process #informationarchitecture {
    min-height: calc(100vh - 4em);
  }
  #process #informationarchitecture .overflowhidden {
    max-height: 33vh;
  }
  #process #informationarchitecture .overflowhidden > img {
    max-height: 33vh;
  }
  #process #informationarchitecture .icon-text {
    max-width: 100vw;
    padding: 2em;
  }
}

  #process #visualization {
    display: grid;
    grid-template-columns: 1fr 3fr;
    min-height: 100vh;
  }
    #process #visualization .description {
      align-self: center;
      justify-self: center;
      padding: 2em;
    }
      #process #visualization .description * {
        max-width: 18.5em;
      }
    #process #visualization > .example {
      display: grid;
      grid-template-columns: repeat(3, 1fr max-content) 1fr;
      background-color: var(--fvv-black);
      color: var(--fvv-mediumgray);
    }
      #process #visualization .example > * {
        display: grid;
        max-width: 16.5em;
        align-self: center;
        margin: 2em 0;
      }
      #process #visualization .example img {
        justify-self: center;
      }
      #process #visualization .example #skatericonlayers {
        max-width: 80%;
        margin-bottom: 2em;
      }
      .thumb-text * {
        line-height: 1.5em;
      }
        .thumb-text img {
          float: left;
          margin-right: 1.5em;
        }
        .thumb-text p {
          overflow: hidden;
          margin-bottom: 1.5em;
        }
@media (max-width: 1439px) {
  #process #visualization {
    grid-template-rows: max-content auto;
    grid-template-columns: auto;
  }
    #process #visualization .description {
      padding: 4em;
    }
      #process #visualization .description * {
        max-width: none;
      }
}
@media (max-width: 919px) {
    #process #visualization .example {
      grid-template-rows: auto;
      grid-template-columns: auto;
      padding: 1em 0;
    }
      #process #visualization .example > * {
        margin: 1em 0;
      }
    #process #visualization .example #iconsystem {
      grid-column: 2 / span 3;
      max-width: none;
      padding: 0 2em;
    }
    #process #visualization .example #iconsystem h4 {
      justify-self: start;
    }
      #process #visualization .example img {
        max-width: 18.5em;
        justify-self: center;
      }
        #process #visualization .example #dissection {
          grid-column: 3 / span 2;
          grid-row: 2 / span 1;
        }
}
@media (max-width: 767px) {
  #process #visualization .description {
    padding: 2em;
  }
    #process #visualization .example {
      grid-template-rows: repeat(3, 0 max-content) 0;
      grid-template-columns: auto;
    }
    #process #visualization .example * {
      max-width: 18.5em;
      justify-self: center;
    }
    #process #visualization .example #iconsystem {
      grid-column: auto;
    }
    #process #visualization .example #dissection {
      grid-column: auto;
      grid-row: auto;
    }
}

  #process #iteration {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
  #process #iteration .description {
    display: flex;
    min-height: 100vh;
    align-items: center;
    background-image: radial-gradient(50% 50%, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.00) 90%, rgba(0,0,0,0.05) 150%), url('process/images/iterationbg.svg');
    background-size: auto, cover;
    background-position: left top, center center;
  }
  #process #iteration .description .contentwrapper {
    display: grid;
    grid-column-gap: 3em;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    padding: 2em 4em;
  }
 #process #iteration .description #tmc {
   justify-self: center;
   align-self: center;
 }
 #process #iteration .description #tmc img {
    width: 7.5em;
 }
 #process #iteration .description #testing {
    grid-template-columns: auto 1.375em;
  }
  #process #iteration .description #testing p {
    grid-column: 1;
    text-align: right;
  }
  #process #iteration .description #testing h3 {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }
  #process #iteration .description #testing img {
    grid-column: 2;
  }
/*
  #process #iteration .description p:before {
    content: "";
    width: 16em;
    height: 18em;
  }
  #process #iteration .description #prototyping p:before {
    float: right;
    shape-outside: circle(15% at right);
  }
  #process #iteration .description #testing p:before {
    float: left;
    shape-outside: circle(15% at left);
  }
*/
  #process #iteration .example {
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: var(--fvv-black);
    color: var(--fvv-mediumgray);
  }
  #process #iteration .example img {
    width: 100%;
    height: 33.33vh;
    object-fit: cover;
  }
  #process #iteration .example img:first-child {
    align-self: start;
    /* object-position: 20%; */
  }
  #process #iteration .example img:last-child {
    align-self: end;
  }
  #process #iteration .example p {
    padding: 1em 4em;
  }
@media (max-width:1680px) {
  #process #iteration .example p {
    padding: 1em 2em;
  }
}
@media (max-width:1439px) {
  #process #iteration .description .contentwrapper {
    grid-template-columns: auto;
    grid-template-rows: auto max-content auto;
    align-items: center;
    grid-row-gap: 2em;
    min-height: 100vh;
  }
 #process #iteration .description .icon-text {
   align-self: center;
 }
 #process #iteration .description #prototyping {
   grid-template-columns: auto;
   grid-row-gap: 1em;
   align-content: center;
  }
  #process #iteration .description #prototyping h3 {
    text-align: center;
  }
  #process #iteration .description #prototyping p {
    grid-column: auto;
    text-align: center;
  }
 #process #iteration .description #testing {
    grid-template-columns: auto;
    grid-row-gap: 1em;
    align-content: center;
  }
  #process #iteration .description #testing p {
    grid-column: auto;
    text-align: center;
  }
  #process #iteration .description #testing h3 {
    text-align: center;
    grid-row: 2;
  }
  #process #iteration .description #testing img {
    grid-column: auto;
  }
}
@media (max-width:1260px) {
  #process #iteration {
    grid-template-columns: 1.5fr 1fr;
  }
}
@media (max-width:1023px) {
}
@media (max-width:767px) {
  #process #iteration {
    grid-template-columns: 1fr;
  }
  #process #iteration .example {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-auto-rows: auto;
    min-height: 50vh;
  }
  #process #iteration .example img {
    height: auto;
    max-height: 50vh;
    max-width: none;
  }
  #process #iteration .example img:first-child {
    align-self: start;
  }
  #process #iteration .example img:last-child {
    align-self: end;
  }
  #process #iteration .example p {
    padding: 2em 2em;
  }
}
#process #CTA {
  background-color: var(--fvv-white);
  box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.15);
  padding: 4em 0;
}
#process #CTA .link-button {
  margin: auto;
  padding-left: 0.15625em;
}

  /* Career */

  #career main {
    display: flex;
    min-height: calc(100vh - 6em);
  }
    #career #brickarea {
      background: var(--fvv-white);
      width: 100%;
      max-width: 928px;
    }
    /* clear fix */
    #career #brickarea:after {
      content: '';
      display: block;
      clear: both;
    }
      .brickheading {
        font-weight: 600;
        color: var(--fvv-black);
      }
      /* Bricks */
      #career #brickarea .brick {
        float: left;
        width: 100%;
        /* min-height: 64px; */
      }
      #career #brickarea .brick, .grid-sizer {
        width: 100%;
      }
      /* Styling by Prominence */
      #career #brickarea .brick.prominence-2 {
        width: 100%;
      }
      #career #brickarea .brick.prominence-3 {
        width: 100%;
      }
      /* Styling by Engagement Type */
      .et-freelance-employed {
        border: rgba(0, 0, 0, 0) 1px solid;
        background: var(--fvv-mediumgray);
      }
      .et-employed {
        border: rgba(0, 0, 0, 0) 1px solid;
        background: var(--fvv-mediumgray);
      }
      .et-freelance {
        border: rgba(0, 0, 0, 0) 1px solid;
        background: var(--fvv-lightgray);
      }
      .et-training {
        border: var(--fvv-mediumgray) 1px solid;
      }
        /* Brick Front */
        .brickfront {
          display: grid;
          grid-template-columns: 40% 40% auto;
          grid-template-areas:
          'organization jobtitle time'
          'location engagementtype engagementtype';
          grid-column-gap: 2em;
          width: 100%;
          min-height: 5em;
          margin-bottom: 1em;
          border-radius: var(--fvv-border-radius);
          padding: 7px 19px 7px;
        }
        .brickfront:hover {
          border: var(--fvv-highlight) 1px solid;
        }
          /* Brick Elements */
          .organization {
            grid-area: organization;
          }
          .jobtitle {
            grid-area: jobtitle;
            vertical-align: text-top;
          }
          .time {
            grid-area: time;
            vertical-align: text-top;
            text-align: right;
          }
          .location {
            grid-area: location;
            vertical-align: text-top;
          }
          .engagementtype {
            grid-area: engagementtype;
            vertical-align: text-top;
          }
    #career #contentarea {
      float: right;
      width: 320px;
      margin-left: 4em;
    }
      /* Brick Contents */
      .brickcontents {
        width: 320px;
        height: 0px;
        color: var(--fvv-darkgray);
        background: var(--fvv-white);
        transition: opacity 0s ease 0s;
        opacity: 0;
        z-index: -100;
        overflow: hidden;
      }
      .brickcontents.visible {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 32px;
        transition: opacity 0.2s ease 0s;
        opacity: 1;
        z-index: 100;
        overflow: visible;
      }
        .close {
          float: right;
          margin-top: 9px;
          width: 12px;
          height: 12px;
          opacity: 0;
        }
      /* Filter Group */
      #filters {
        opacity: 1;
        width: 328px;
        height: 100%;
        transition: opacity 0.2s ease 0.1s;
        opacity = '1';
      }
      #filters.hidden {
        position: absolute;
        transition: opacity 0.2s ease 0s;
        opacity: 0;
      }
        ul.option-set {
          list-style: none;
          margin-top: 0.5em;
          margin-bottom: 1.25em;
        }
          ul.option-set li {
            display: inline;
          }
            ul.option-set li label {
              display: inline-block;
              white-space: nowrap;
              margin-bottom: 0.5em;
              margin-right: 0.5em;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              -webkit-tap-highlight-color: transparent;
              border-radius: var(--fvv-border-radius);
              transition: all .2s;
              padding: 0 7px;
              line-height: 30px;
              cursor: pointer;
            }
            ul.option-set li label.tag-default {
              border: 1px solid var(--fvv-darkgray);
            }
            ul.option-set li label:hover {
              border: 1px solid var(--fvv-highlight);
            }
            ul.option-set li input[type="checkbox"] {
              position: absolute;
              opacity: 0;
            }
              ul.option-set li input[type="checkbox"]:checked + label {
                border: 1px solid var(--fvv-highlight);
                background-color: var(--fvv-highlight);
                color: var(--fvv-white);
                transition: all .2s;
              }
        #sticky {
          position: -webkit-sticky; /* Safari */
          position: sticky;
          top: 2em;
          background-color: var(--fvv-white);
        }
        #sticky.hidden {
          height: 0;
          transition: opacity 0.2s ease 0s;
          opacity: 0;
        }
          #reset {
            max-width: 20em;
            margin-bottom: 1em;
          }
          #filters .link-button {
              width: 100%;
              background: var(--fvv-black);
              border: var(--fvv-black) 2px solid;
              color: var(--fvv-white);
            }
          #filters .link-button:active {
              background: var(--fvv-white);
              border: var(--fvv-black) 2px solid;
              color: var(--fvv-black);
            }
          #filters .link-button.engaged {
              background: var(--fvv-highlight);
              border: var(--fvv-highlight) 2px solid;
            }
          #filters .link-button:active.engaged {
              background: var(--fvv-white);
              border: var(--fvv-highlight) 2px solid;
              color: var(--fvv-highlight);
            }
    #career #CTA {
      background-color: var(--fvv-highlight);
      padding: 4em 0;
      margin-top: 4em;
    }
    #career #CTA .link-button {
      margin: auto;
      padding-left: 0.15625em;
      background: var(--fvv-highlight);
      border: var(--fvv-white) 2px solid;
      color: var(--fvv-white);
      line-height: 2.5em;
    }
    #career #CTA .link-button:active {
      background: var(--fvv-white);
      color: var(--fvv-highlight);
    }
      #career #CTA .link-button .link-arrow {
        background: url(../images/icon-arrow-right.svg) no-repeat;
      }
      #career #CTA .link-button:active .link-arrow {
        background: url(../images/icon-arrow-right-red.svg) no-repeat;
      }

@media (max-width: 1439px) {
  .brickfront {
    grid-template-columns: 65% auto;
    grid-template-areas:
    'organization organization'
    'location time'
    'jobtitle engagementtype';
  }
  .engagementtype {
    text-align: right;
  }
  #career #contentarea {
    margin-left: 2em;
  }
  #filters {
    transition: opacity 0.2s ease 0s;
  }
}

@media (max-width: 1023px) {
  .brickfront {
    grid-template-columns: 50% auto;
    grid-template-areas:
    'engagementtype time'
    'organization organization'
    'jobtitle jobtitle'
    'location location';
  }
  .engagementtype {
    text-align: left;
  }
  #reset {
    max-width: none;
  }
}

@media (max-width: 767px) {
  #career main {
    flex-direction: column-reverse;
  }
  #career .contentwrapper {
    padding: 4em 0 2em;
  }
  #career #brickarea {
    width: 100%;
  }
  /* Styling by Engagement Type */
  .et-freelance-employed {
    border: rgba(0, 0, 0, 0) 1px solid;
    background: var(--fvv-mediumgray);
  }
  .et-employed {
    border: rgba(0, 0, 0, 0) 1px solid;
    background: var(--fvv-mediumgray);
  }
  .et-freelance {
    border: rgba(0, 0, 0, 0) 1px solid;
    background: var(--fvv-lightgray);
  }
  #brickarea .et-training {
    border: none;
    border-top: var(--fvv-mediumgray) 1px solid;
    border-bottom: var(--fvv-mediumgray) 1px solid;
    border-left: rgba(0, 0, 0, 0) 1px solid;
    border-right: rgba(0, 0, 0, 0) 1px solid;
  }
  .brickfront {
    margin-bottom: 0.25em;
    border-radius: 0;
  }
  .brickfront:hover {
    border: rgba(0, 0, 0, 0) 1px solid;
    background-color: var(--fvv-highlight-02);
  }
  #career #contentarea {
    width: 100%;
    margin-left: 0;
  }
  .brickcontents {
    width: 100%;
  }
  .brickcontents.visible {
    height: 100vh;
    padding: 1em;
    position: fixed;
    top: 0;
  }
  #filters {
    width: 100%;
    padding: 1em;
  }
  #filters.hidden {
    position: static;
    opacity: 1;
  }
}

  /* Contact */

  #contact main {
    min-height: calc(100vh - 6em);
    display: grid;
    grid-template-columns: 2fr 1fr;
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.15);
  }
  #contact #inspiration {
    display: grid;
    padding: 4em;
    background-color: var(--fvv-highlight);
    font-size: 1.5rem;
    line-height: 3rem;
    font-weight: 500;
    letter-spacing: 0.09375rem;
    color: var(--fvv-white);
  }
  #contact #inspiration * {
    max-width: 71.125em;
    align-self: center;
    justify-self: center;
  }
  #contact #inspiration p em {
    display: inline-block;
    padding-top: 2em;
  }
  #contact #sayhello {
    display: grid;
    padding: 4em;
  }
  #contact #sayhello div {
    max-width: 26.5em;
    align-self: center;
    justify-self: center;
  }
@media (max-width: 1439px) {
  #contact main {
    grid-template-columns: 1fr 1fr;
  }
  #contact #inspiration {
    font-size: 1.2rem;
    line-height: 2.4rem;
    letter-spacing: 0.075rem;
  }
  #contact #inspiration * {
    align-self: start;
  }
  #contact #inspiration p em {
    display: inline-block;
    padding-top: 1em;
  }
  #contact #sayhello div {
    max-width: none;
    align-self: start;
  }
}
@media (max-width: 1024px) {
  #contact main {
    min-height: calc(100vh - 6em);
  }
  #contact #inspiration {
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: 0.05rem;
    padding: 3rem;
  }
  #contact #sayhello {
    padding: 3em;
  }
}
@media (max-width: 767px) {
  #contact main {
    grid-template-columns: 1fr;
    grid-template-rows: max-content auto;
    padding-top: 4em;
    padding-bottom: 4em;
  }
}
@media (max-width: 414px) {
  #contact #inspiration {
    padding: 2rem;
  }
  #contact #sayhello {
    padding: 2em;
  }
}