/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/

/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
:root {
  --color-bg: #121212;
  --color-text-main: #f9f8f6;
  --color-link-active: #f9f8f6;
  --color-link-focus: #f9f8f6;
  --color-link-hover: #eca03c;
  --color-link-main: #b3b3b1;
  --color-primary: #ffff00;
  --color-macaroni: #eca03c;
  --color-blueberry: #016ad5;
  --color-tomato: #e81c25;
  --color-grape: #7873c3;
  --color-lavender: #d88ab2;
  --color-sage: #197856;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "ApfelReg";
  --font-family-bold: "ApfelBold";
  --font-family-header: "GooperCondBold";
  --font-family-subheader: "GooperSemiCondReg";
  --font-family-subheader-second: "GooperCondMed";
  --easing-quint: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  --easing-quint-long: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}

p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figure {
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: ApfelReg;
  font-weight: normal;
  src:url('/fonts/ApfelGrotezk-Regular.woff') format('woff'),
      url("/fonts/ApfelGrotezk-Regular.otf") format("opentype");
}

@font-face {
  font-family: ApfelBold;
  font-weight: normal;
  src:url('/fonts/ApfelGrotezk-Fett.woff') format('woff'),
      url("/fonts/ApfelGrotezk-Fett.otf") format("opentype");
}
@font-face {
  font-family: GooperCondBold;
  font-weight: normal;
  src: url('/fonts/VCGooperCondensed-Bold.woff') format('woff'),
       url('/fonts/VCGooperCondensed-Bold.woff') format('woff2'),
       url("/fonts/VCGooperCondensed-Bold.otf") format("opentype");
}
@font-face {
  font-family: GooperCondMed;
  font-weight: normal;
  src: url('/fonts/VCGooperCondensed-Medium.woff') format('woff'),
       url('/fonts/VCGooperCondensed-Medium.woff2') format('woff2'),
       url("/fonts/VCGooperCondensed-Medium.otf") format("opentype");
}
@font-face {
  font-family: GooperSemiCondReg;
  font-weight: normal;
  src: url('/fonts/VCGooperSemiCondensed-Regular.woff') format('woff'),
       url('/fonts/VCGooperSemiCondensed-Regular.woff') format('woff2'),
       url("/fonts/VCGooperSemiCondensed-Regular.otf") format("opentype");
}

/* Navigation grid */
.footer {
  display: grid;
  max-width:1440px;
  margin: 1rem auto 0;
  width: 100%;
  grid-template-areas:
    "callout big-links"
    "blogs blogs";
  grid-template-columns: 4fr 7fr;
  grid-template-rows: 1fr min-content;
  padding-top: 7.375rem;
  padding-bottom: 10.5rem;
  padding-left: 1rem;
  padding-right: 2rem;
  grid-column-gap: 6.4vw;
}

@media screen and (max-width: 1220px) {
  .footer {
    grid-template-areas:
      "callout callout"
      "big-links big-links"
      "blogs blogs";
    padding-right: 1rem;
  }
}

.nav a.active{
  color: var(--color-link-active);
  font-family: var(--font-family-bold);
}

a {
  font-family: var(--font-family);
  font-style: normal;
  font-weight: normal;
  font-size: 1.125rem;
  color: var(--color-link-main);
  text-decoration: none;
  border-style: none;
  transition: all 0.5s ease;
  line-height: 143%;
}

nav a {
  font-size: 1.2rem;
}

a:visited {
  color: var(--color-link-main);
}

a.active:visited {
  color: var(--color-lavender);
}

a:hover {
  color: var(--color-link-hover) !important;
  transition: all 0.5s ease;
}

.tags p {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: 1.125rem;
    color: var(--color-link-main);
    text-decoration: none;
    border-style: none;
    transition: all 0.5s ease;
    line-height: 143%;
    margin:0rem;
}


/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  margin: 0 auto;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  width: 100%;
  max-width: 1440px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  position:relative;
}

.quick-switcher {
  position:sticky;
  bottom:0rem;
/*   background:red; */
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right:1rem;
}

.quick-switcher-top {
  position:relative;
  /*   background:red; */
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right:1rem;
  display: none;
}

.quick-switcher-top .button-container {
margin-bottom:0rem;
}

@media screen and (max-width: 1492px) {
  .wrapper {
    max-width: 1200px; /* used to be 1340px */
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  grid-row-gap: 4rem;
}

@media screen and (max-width: 1470px) {
  .content {
    padding: 2rem;
  }
}

@media screen and (max-width: 500px) {
  .content {
    padding: 0.8rem;
  }
}

nav.nav {
  display: flex;
  column-gap: 1rem;
  width:100%;
  margin-bottom:3rem;
}

.tags {
  display: flex;
  column-gap: 1rem;
}

@media screen and (max-width: 800px) {
  .tags {
    flex-wrap: wrap;
  }
}

a.tag:not(.active) {
  pointer-events: none;
}

.intro {
  display: grid;
  grid-template-columns: 4fr 6fr;
  padding-top: 5rem;
  width: 100%;
  overflow:hidden;
  transition:all .5s ease;
}

@media screen and (max-width: 1024px) {
  .intro {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 700px) {
  .intro {
    padding-top: 2rem;
  }
}

/* Very light scaling for our illustration */
.title {
  color: var(--color-text-main);
  font-family: var(--font-family-header);
  font-style: normal;
  font-weight: normal;
  font-size: 5.75rem;
  line-height: 105%;
  margin: 0;
  -webkit-font-smoothing:antialiased;
}

@media screen and (max-width: 1200px) {
  .title {
    font-size: 5rem;
  }
}

@media screen and (max-width: 1024px) {
  .title {
    font-size: 4rem;
  }
}

@media screen and (max-width: 700px) {
  .title {
    font-size: 3rem;
  }
}

@media screen and (max-width: 1200px) {
  p.intro  {
  font-size:1.125rem;
  }
}


@media screen and (max-width: 1024px) {
  p.intro  {
  font-size:1rem;
  }
}

@media screen and (max-width: 700px) {
  p.intro  {
  font-size:.8rem;
  }
}



/* Button - Add it from the README instructions */
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
}

/* Subheading */

h1 {
  color: var(--color-text-main);
  font-size: 5.3125rem;
  font-family: var(--font-family-header);
  margin: 0rem;
  font-weight: normal;
}

h2 {
  color: var(--color-text-main);
  font-size: 5.3125rem;
  font-family: var(--font-family-header);
  margin: 0rem;
  font-weight: normal;
}

h3 {
  color: var(--color-text-main);
  font-size: 2.25rem;
  font-family: var(--font-family-subheader);
  margin: 0rem;
  font-weight: normal;
}

.project-info h3 {
  font-size: 2rem;
  font-family: var(--font-family-subheader-second);
}

p,
figure {
  color: var(--color-text-main);
  line-height: 150%;
  font-size: 1.5rem;
}

figure {
  color: var(--color-text-main);
  line-height: 150%;
  font-size: 1rem;
  margin-top:.5rem;
  margin-bottom:.5rem;
  margin-left:0rem;
  margin-right:0rem;
}

p.small {
  color: var(--color-text-main);
  line-height: 150%;
  font-size: 1.125rem;
}

/* Piece Grid Types */

.top-matter {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  width: 100%;
  position:relative;
}

.work-wrap {
  /*   background: yellow; */
  width: 100%;
  display: grid;
  grid-row-gap: 8.125rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.content-wrap {
  /*   background: pink; */
  width: 100%;
  display: grid;
  grid-row-gap: 2.125rem;
}

.about-wrap {
  /*   background: yellow; */
  width: 100%;
  display: grid;
  grid-row-gap: 8vw;
}

.piece-wrap {
  /*   background: red; */
  display: grid;
  width: 100%;
  grid-auto-flow: column;
}

@media screen and (max-width: 700px) {
  .piece-wrap {
    grid-template-columns: 1fr !important;
  }
}

.piece {
  /*   background: blue; */
  display: grid;
  grid-row-gap: 0rem;
  position: relative;
  align-items: start;
  height: fit-content;
}

.about-content {
  display: grid;
  grid-template-areas:
    "portrait key-text"
    "subtext subtext";
  grid-template-rows: 1fr min-content;
  grid-template-columns: 4fr 7.5fr;
  grid-row-gap: 1.5rem;
}

@media screen and (max-width: 1024px) {
  .about-content {
    display: grid;
    grid-template-areas:
      "portrait spacer"
      "key-text key-text"
      "subtext subtext";
    grid-template-rows: 1fr min-content min-content;
    grid-template-columns: 7fr 7.5fr;
    grid-row-gap: 1.5rem;
  }
}

@media screen and (max-width: 500px) {
  .about-content {
    grid-template-columns: 15fr 7.5fr;
  }
}

.portrait {
  grid-area: portrait;
  padding-right: 3.5vw;
}

.key-text {
  grid-area: key-text;
  display: flex;
  flex-direction: column;
}

.subtext {
  grid-area: subtext;
  line-height: 147%;
}


.long-story-wrap h2 {
  font-size: 3.5vw;
  line-height: 124%;
}

.long-story-wrap h3 {
  font-size: 2rem;
}

@media screen and (max-width: 1200px) {
  .subtext h3 {
    font-size: 2rem;
  }

  .long-story-wrap h3 {
    font-size: 2rem;
  }


.long-story-wrap h2 {
  font-size: 7vw;
  line-height: 124%;
}
}


@media screen and (max-width: 700px) {
  .subtext h3 {
    font-size: 1.5rem;
  }

  .long-story-wrap h3 {
    font-size: 1.5rem;
  }

.long-story-wrap h2 {
  font-size: 9vw;
  line-height: 124%;
}
}

.about-content .subtext {
  padding-top: 0.5rem;
}

@media screen and (max-width: 1200px) {
  .about-content .subtext {
    font-size: 2rem;
  }
}

@media screen and (max-width: 700px) {
  .about-content .subtext {
    font-size: 1.5rem;
  }
}

.key-text h2 {
  line-height: 136%;
  padding-bottom: 1rem;
}

@media screen and (max-width: 1200px) {
  .key-text h2 {
    font-size: 4rem;
  }

  /* .long-story-wrap h2 {
    font-size: 4rem;
  } */
}

@media screen and (max-width: 700px) {
  .key-text h2 {
    font-size: 2.6rem;
  }

  /* .long-story-wrap h2 {
    font-size: 2.6rem;
  } */
}

/* .notes {
  display: flex;
  flex-direction: row;
  column-gap: 2rem;
} */

.notes p {
  margin: 0rem;
  font-size: 1.25rem;
  column-count: 2;
  column-gap: 2rem;
}

p.columns {
  column-count: 2;
  column-gap: 1.5rem;
  font-size: 1.25rem;
}

@media screen and (max-width: 700px) {
  .notes p {
    column-count: 1;
  }

  p.columns {
    column-count: 1;
  }
}

.media {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transition: all 0.5s ease;
}

.case-study-content .media {
  margin-top: 2rem;
}

.case-study-content-withsidebar .media {
  margin-top: 2rem;
}

img {
  width: 100%;
}

video {
  width: 100%;
}

.media img {
  width: 100%;
}

.media video {
  width: 100%;
}

.alottment {
  position: absolute;
  bottom: 12px;
  left: 8px;
  background: var(--color-text-main);
  padding: 0.2rem 1rem;
  border-radius: 2rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: var(--easing-quint);
}

.alottment p {
  font-size: 1rem;
  color: var(--color-bg);
  margin: 0rem;
  padding: 0rem;
}

.alottment.year {
  position: absolute;
  bottom: 12px;
  right: 8px;
  left:initial;
  background: var(--color-text-main);
  padding: 0.2rem 1rem;
  border-radius: 2rem;
  opacity: 0;
  transform: translateX(8px);
  transition: var(--easing-quint);
}

.alottment.year p {
  font-size: 1rem;
  color: var(--color-bg);
  margin: 0rem;
  padding: 0rem;
}

.piece:hover .media {
  opacity: 0.6;
  transition: all 0.5s ease;
}

.piece:hover .alottment {
  opacity: 1;
  transform: translateX(0px);
  transition: var(--easing-quint);
}

.piece:hover .alottment.year {
  opacity: 1;
  transform: translateX(0px);
  transition: var(--easing-quint);
}

.piece-wrap.type--xxs-m {
  grid-template-areas: "a b";
  grid-template-columns: 3fr 8fr;
  grid-column-gap: 9.3vw;
}

@media screen and (max-width: 800px) {
  .piece-wrap.type--xxs-m {
    grid-template-areas:
      "a c"
      "b b";
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 12.4vw;
  }

  .piece-wrap.type--xxs-m .piece:nth-of-type(2) {
    grid-area: b;
  }
}

@media screen and (max-width: 500px) {
  .piece-wrap.type--xxs-m {
    grid-template-areas:
      "a"
      "b";
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-row-gap: 12.4vw;
  }
}

.piece-wrap.type--xxs-m.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 8fr 3fr;
  grid-column-gap: 9.3vw;
}

@media screen and (max-width: 800px) {
  .piece-wrap.type--xxs-m.reverse {
    grid-template-areas:
      "a a"
      "b c";
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 12.4vw;
  }

  .piece-wrap.type--xxs-m.reverse .piece:nth-of-type(2) {
    grid-area: a;
  }
}

@media screen and (max-width: 500px) {
  .piece-wrap.type--xxs-m.reverse {
    grid-template-areas:
      "a"
      "b";
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-row-gap: 12.4vw;
  }
}

.piece-wrap.type--xs-m {
  grid-template-areas: "a b";
  grid-template-columns: 4fr 8fr;
  grid-column-gap: 6.3vw;
}

@media screen and (max-width: 800px) {
  .piece-wrap.type--xs-m {
    grid-template-areas:
      "a a"
      "b c";
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 12.4vw;
  }
  .piece-wrap.type--xxs-m.reverse .piece:nth-of-type(2) {
    grid-area: a;
  }
}

@media screen and (max-width: 500px) {
  .piece-wrap.type--xs-m {
    grid-template-areas:
      "a"
      "b";
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-row-gap: 12.4vw;
  }
}

.piece-wrap.type--xs-m.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 4fr 8fr;
  grid-column-gap: 6.3vw;
}

@media screen and (max-width: 800px) {
  .piece-wrap.type--xs-m.reverse {
    grid-template-areas:
      "a a"
      "b c";
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 12.4vw;
  }

  .piece-wrap.type--xs-m.reverse .piece:nth-of-type(2) {
    grid-area: a;
  }
}

@media screen and (max-width: 500px) {
  .piece-wrap.type--xs-m.reverse {
    grid-template-areas:
      "a"
      "b";
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-row-gap: 12.4vw;
  }
}

.piece-wrap.type--sm-xs {
  grid-template-areas: "a b";
  grid-template-columns: 7fr 4fr;
  grid-column-gap: 9.3vw;
}

@media screen and (max-width: 800px) {
  .piece-wrap.type--sm-xs {
    grid-template-areas:
      "a c"
      "b b";
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 12.4vw;
  }

  .piece-wrap.type--sm-xs .piece:nth-of-type(2) {
    grid-area: b;
  }
}

@media screen and (max-width: 500px) {
  .piece-wrap.type--sm-xs {
    grid-template-areas:
      "a"
      "b";
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-row-gap: 12.4vw;
  }
}

.piece-wrap.type--sm-xs.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 7fr 4fr;
  grid-column-gap: 9.3vw;
}

@media screen and (max-width: 800px) {
  .piece-wrap.type--sm-xs.reverse {
    grid-template-areas:
      "a a"
      "b c";
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 12.4vw;
  }

  .piece-wrap.type--sm-xs.reverse .piece:nth-of-type(2) {
    grid-area: a;
  }
}

@media screen and (max-width: 500px) {
  .piece-wrap.type--sm-xs.reverse {
    grid-template-areas:
      "a"
      "b";
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-row-gap: 12.4vw;
  }
}

.piece-wrap.type--xx-large {
  grid-template-columns: 12fr;
}

.piece-wrap.type--x-large {
  grid-template-areas: "a b";
  grid-template-columns: 11fr 1fr;
}

.piece-wrap.type--x-large.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 1fr 11fr;
}

.piece-wrap.type--x-large.reverse .piece {
  grid-area: a;
}

.piece-wrap.type--large {
  grid-template-areas: "a b";
  grid-template-columns: 9fr 3fr;
}

.piece-wrap.type--large.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 3fr 9fr;
}

.piece-wrap.type--large.reverse .piece {
  grid-area: a;
}

.piece-wrap.type--medium {
  grid-template-areas: "a b";
  grid-template-columns: 4fr 8fr;
}

.piece-wrap.type--medium.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 4fr 8fr;
}

.piece-wrap.type--medium.reverse .piece {
  grid-area: a;
}

.piece-wrap.type--small {
  grid-template-areas: "a b";
  grid-template-columns: 7fr 5fr;
}

.piece-wrap.type--small.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 7fr 5fr;
}

.piece-wrap.type--small.reverse .piece {
  grid-area: a;
}

.piece-wrap.type--x-small {
  grid-template-areas: "a b";
  grid-template-columns: 4fr 8fr;
}

.piece-wrap.type--x-small.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 4fr 8fr;
}

.piece-wrap.type--x-small.reverse .piece {
  grid-area: a;
}

.piece-wrap.type--xx-small {
  grid-template-areas: "a b";
  grid-template-columns: 3fr 9fr;
}

.piece-wrap.type--xx-small.reverse {
  grid-template-areas: "b a";
  grid-template-columns: 3fr 9fr;
}

.piece-wrap.type--xx-small.reverse .piece {
  grid-area: a;
}

.long-story-wrap {
  display: grid;
  grid-row-gap: 3.6875rem;
  height: 0rem;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5rem);
  transition: var(--easing-quint-long);
}

.long-story-wrap.open {
  height: fit-content;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0rem);
  transition: var(--easing-quint-long);
}

.industries,
.clients {
  padding: 2rem;
  background: #292929;
  border-radius: 3.125rem;
  row-gap: 2rem;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 800px) {
  .industries,
  .clients {
    padding: 1rem;
  }
}

@media screen and (max-width: 500px) {
  .industries,
  .clients {
    padding: 0.7rem;
    padding-bottom: 1.2rem;
    padding-top: 1.2rem;
    border-radius: 2rem;
  }
}

.industries h3,
.clients h3 {
  padding-left: 0.5rem;
}

@media screen and (max-width: 1200px) {
  .industries h3,
  .clients h3 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 700px) {
  .industries h3,
  .clients h3 {
    font-size: 1.5rem;
  }
}

.industry-wrap,
.client-wrap {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.9375rem;
  row-gap: 0.9375rem;
}

@media screen and (max-width: 500px) {
  industry-wrap,
  .client-wrap {
    column-gap: 0.6375rem;
    row-gap: 0.6375rem;
  }
}

p.industry,
p.client {
  font-family: var(--font-family-subheader);
  padding: 0.625rem 1.875rem;
  background: #3e3e3e;
  width: fit-content;
  border-radius: 2.5rem;
  margin: 0rem;
  font-size: 2rem;
}

@media screen and (max-width: 500px) {
  p.client {
    width: fit-content;
  }

  p.industry {
    width: 100%;
  }
}

@media screen and (max-width: 1200px) {
  p.industry,
  p.client {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 700px) {
  p.industry,
  p.client {
    font-size: 1.2rem;
  }
}

.footer-callout {
  grid-area: callout;
}

@media screen and (max-width: 1301px) {
  .footer-callout {
    font-size: 4rem;
  }
}

.big-links {
  grid-area: big-links;
  display: flex;
  flex-wrap: nowrap;
  column-gap: 20px;
  padding: 10px;
}

@media screen and (max-width: 1220px) {
  .big-links {
    flex-wrap: wrap;
    row-gap: 20px;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
  }
}

@media screen and (max-width: 500px) {
  .big-links {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}

.blogs {
  grid-area: blogs;
}

.big-links a {
  font-family: var(--font-family-header);
  font-size: 1.74375rem;
  width: 116px;
  height: 116px;
  border-radius: 77.83px;
  background: var(--color-text-main);
  color: var(--color-bg);
  transition: var(--easing-quint);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.09px;
  align-content: center;
  text-align: center;
  line-height: 100%;
}

@media screen and (max-width: 500px) {
  .big-links a {
    width: 100px;
    height: 100px;
    font-size: 1.6rem;
  }
}

.blogs-wrap a {
  font-size: 1rem;
  line-height: 145%;
}

.big-links a:hover {
  transition: var(--easing-quint);
  color: var(--color-bg) !important;
}

.big-links a:nth-of-type(1):hover {
  background: var(--color-macaroni);
}
.big-links a:nth-of-type(2):hover {
  background: var(--color-blueberry);
  color: var(--color-text-main);
}
.big-links a:nth-of-type(3):hover {
  background: var(--color-tomato);
}
.big-links a:nth-of-type(4):hover {
  background: var(--color-grape);
}
.big-links a:nth-of-type(5):hover {
  background: var(--color-lavender);
}
.big-links a:nth-of-type(6):hover {
  background: var(--color-sage);
  color: var(--color-text-main);
}

.blogs-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-row-gap: 1.375rem;
  grid-column-gap: 2.1875rem;
}

@media screen and (max-width: 1024px) {
  .blogs-wrap {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 800px) {
  .blogs-wrap {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 600px) {
  .blogs-wrap {
    grid-template-columns: 1fr;
  }
}

.macaroni {
  color: var(--color-macaroni);
}
.blueberry {
  color: var(--color-blueberry);
}
.tomato {
  color: var(--color-tomato);
}
.grape {
  color: var(--color-grape);
}
.lavender {
  color: var(--color-lavender);
}
.sage {
  color: var(--color-sage);
}

.trigger-wrap {
  display: flex;
  /*     background: #494947; */
  padding: 1rem;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  padding-bottom: 3rem;
}

.dotted-line {
  border-top: 4px dotted var(--color-text-main);
  width: 100%;
  position: absolute;
  height: 4px;
  opacity: 0.8;
}

.long-story-trigger {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  color: var(--color-text-main);
  padding: 1rem 2rem;
  font-family: var(--font-family-subheader);
  font-size: 2rem;
  border-radius: 4rem;
  transition: var(--easing-quint);
  border: none;
  outline: none;
  box-shadow: 0px;
}

@media screen and (max-width: 1024px) {
  .long-story-trigger {
    font-size: 1.5rem;
    padding: 0.6rem 1.5rem;
  }
}

@media screen and (max-width: 500px) {
  .long-story-trigger {
    font-size: 1.4rem;
    padding: 0.6rem 1.4rem;
  }
}

.long-story-trigger:hover {
  background: var(--color-macaroni);
  color: var(--color-bg);
  transition: var(--easing-quint);
}

.tool {
  display: flex;
  grid-template-columns: 310px;
  grid-template-rows: 182px min-content;
  row-gap: 0.7rem;
  flex-direction: column;
}

.tool p {
  margin: 0rem;
  font-size: 1.125rem;
}

.tool img {
  width: 310px;
  height: 182px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid #454545;
}

@media screen and (max-width: 600px) {
  .tool img {
    width: 100%;
    height: auto;
  }
}

.tool-wrap {
  display: flex;
  column-gap: 1.5625rem;
  width: 100%;
  row-gap: 1.5625rem;
  padding-top: 1.5625rem;
  flex-wrap: wrap;
}

.tools-section {
  padding-bottom: 5.5rem;
}

.tools-wrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  width: 100%;
}

.tool p {
  transition: all 0.5s ease;
}

.tool-link:hover .tool p {
  color: var(--color-macaroni);
  transition: all 0.5s ease;
}

.tool-link.disabled {
  pointer-events:none;
  opacity:.5;
}

.tool-link.disabled:hover .tool p {
  color: var(--color-macaroni);
  pointer-events:none;
  transition: all 0.5s ease;
}

.images {
  display: flex;
  flex-direction: column;
  grid-row-gap: 3.4rem;
  padding-bottom: 1rem;
  padding-top:2rem;
}

.images.hero {
  display: grid;
  grid-template-columns: 12fr;
  grid-auto-rows: auto;
}

.work-img {
  width: 100%;
  /* max-width: 75%; */
}

img.work-img.transparent {
  background: white;
}

@media screen and (max-width: 700px) {
  .work-img {
  /* max-width: 100%; */
}
}

.images.hero .work-img {
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  object-fit: cover;
}

.text-row p {
  font-size: 1.25rem;
  margin-bottom: 0px;
}

.text-row figure {
  font-size: 1rem;
  color: var(--color-text-main);
  padding: 0px;
  margin: 0px;
}

.text-row {
  display: flex;
  flex-direction: column;
  grid-row-gap: 1rem;
  max-width: 75%;
}

@media screen and (max-width: 700px) {
  .text-row {
  max-width: 100%;
}
}

.project-info {
  display: grid;
  grid-template-columns: 4fr 3fr 5fr;
  grid-template-areas: "title tags description";
}

@media screen and (max-width: 1024px) {
  .project-info {
    grid-template-columns: 7fr 5fr;
    grid-template-areas:
      "title tags"
      "description tags";
    grid-column-gap: 2rem;
    grid-row-gap: 1.6rem;
  }
}

@media screen and (max-width: 700px) {
  .project-info {
    grid-template-columns: 12fr;
    grid-template-areas:
      "title"
      "description"
      "tags";
    grid-column-gap: 2rem;
    grid-row-gap: 1.6rem;
  }
}

.project-title {
  grid-area: title;
  font-size: 4.8rem;
  line-height: 108%;
}

@media screen and (max-width: 700px) {
  .project-title {
  font-size:3.5rem;
}
}

.project-description {
  grid-area: description;
}

.project-tags {
  grid-area: tags;
  display: flex;
  flex-direction: column;
  grid-row-gap: 1rem;
}

@media screen and (max-width: 700px) {
  .project-tags {
  grid-row-gap: .5rem;
}
}

.button-container {
  display: flex;
  column-gap: .5rem;
  row-gap: .5rem;
  background: none;
  padding: .4rem .4rem;
  margin-bottom: 1rem;
  border-radius: 1.2rem;
  transition: all .5s ease;
  width: 100%;
  flex-wrap: wrap;
  background: #1b1b1b;
}

p.button {
    font-size: 1rem;
    color: var(--color-text-main);
    margin: 0rem;
    padding: .2rem 0.7rem;
    transition:all .5s ease;
    border-radius: 2rem;
    background: rgba(255,255,255,.15);
}

p.button:hover {
    background:var(--color-macaroni);
    color: var(--color-bg);
  cursor:pointer;

}

p.button.active {
    color: var(--color-bg);
    background: var(--color-text-main);
    border-radius: 2rem;
    transition:all .5s ease;
}

p.button.active:hover {
    opacity:.7;
  transition:all .5s ease;
}

.disabled {
  pointer-events:none;
}


.polaroid {
  width: 1.3rem;
  height: 1.3rem;
  background-position: center center;
  transform-origin: center center;
  transform: translate(0px, 3px);
  -webkit-transform: translate(0px, 3px);
  -o-transform: translate(0px, 3px);
  -moz-transform: translate(0px, 3px);
}

.polaroid svg {
  width:100%;
}

.coin {
  overflow: hidden;
    border-radius: 50rem;
    background: #000000;
    height: fit-content;
    background-position: center center;
    padding: 3px;
    padding-bottom: 0px;
}

a.polaroid  svg {
  fill:var(--color-text-main);
  transition:all .5s ease;
}

a.polaroid:hover  svg {
  fill: var(--color-macaroni);
  transition:all .5s ease;
}


  .case-study-content {
    display: grid;
    max-width: 75%;
    position: relative;
}

.case-study-content-withsidebar {
  display: grid;
  max-width: 100%;
  position: relative;
  grid-template-columns: 75% 25%;
  grid-column-gap: 2rem;
  grid-template-areas:
      'content sidebar';
  /* width: 100%; */
}

@media screen and (max-width: 700px) {
  .case-study-content {
    display: grid;
    max-width: 100%;
}
}

.case-study-content .media {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.case-study-words .media {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.case-study-content h4 {
  color: var(--color-text-main);
  font-size: 2.25rem;
  font-family: var(--font-family-subheader);
  margin: 0rem;
  font-weight: normal;
  /* text-transform: uppercase; */
  margin-top:1.75rem;
  margin-bottom: 1.5rem;
}

.case-study-words h4 {
  color: var(--color-text-main);
  font-size: 2.25rem;
  font-family: var(--font-family-subheader);
  margin: 0rem;
  font-weight: normal;
  /* text-transform: uppercase; */
  margin-top:1.75rem;
  margin-bottom: 1.5rem;
}

.case-study-content h3 {
  color: var(--color-text-main);
  font-size: 2.25rem;
  font-family: var(--font-family-subheader);
  margin: 0rem;
  font-weight: normal;
  /* text-transform: uppercase; */
  margin-top:3.2rem;
  margin-bottom: 1.5rem;
}

.case-study-words h3 {
  color: var(--color-text-main);
  font-size: 2.25rem;
  font-family: var(--font-family-subheader);
  margin: 0rem;
  font-weight: normal;
  /* text-transform: uppercase; */
  margin-top:3.2rem;
  margin-bottom: 1.5rem;
}

.case-study-content .text-link {
  font-size: 1.5rem;
  color: var(--color-lavender);
}

.case-study-words .text-link {
  font-size: 1.5rem;
  color: var(--color-lavender);
}

.home-link {
  text-decoration:none;
  color: var(--color-text-main);
  transition:all .5s ease;
  opacity:1;
}

.home-link:hover {
  transition:all .5s ease;
  opacity:.8;
}

.navcase {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  width:100%;
  position:sticky;
  top:0rem;
  z-index:3;
  margin-bottom:3rem;
  background: var(--color-bg);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navcase .nav {
  margin-bottom: 0rem;
}

nav.nav {
    padding-left: 1rem;
}

.tags {
    background: #2d2d2d;
    width: fit-content;
    padding: 1rem;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    height: fit-content;
}

.hide-scroll {
  margin-bottom:4rem;
}

/* .hide-nav {
  height:0rem;
  overflow:hidden;
  transition:all .5s ease;
}

.hide-transition {
  animation: hideAnimation 0.3s ease;
  animation-fill-mode: forwards;
}

@keyframes hideAnimation {
  from {
    height: 100%;
  }
  to {
    height: 0;
  }
}

.hide-scroll {
  height: 100%;
} */

.hide {
  display:none;
}

.filter-hide {
  display:none !important;
  /* height:0px; */
}

.filter-show {
  display:grid !important;
}

/* .filter-hide.filter-show {
  height: auto;
} */

.service-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  margin-top:2rem;
}

@media screen and (max-width: 700px) {
  .service-wrap {
    grid-template-columns: 1fr;
  }
}

.service {
  /* background: red; */
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 1rem;
}

.services h3 {
color: var(--color-text-main);
  font-size: 2.25rem;
  font-family: var(--font-family-subheader);
  margin: 0rem;
  font-weight: normal;
  padding-left:.5rem;
}

.services h4 {
  font-family: var(--font-family-header);
  color:var(--color-text-main);
  font-size:2.25rem;
  margin:.5rem;
  margin-top:.5rem;
  margin-bottom:0rem;
  font-weight:normal;
}

.services p {
  margin:.5rem;
  margin-top:1rem;
  font-size:1.25rem;
  line-height:150%;
}

.project-list-wrap {
  display: grid;
  width: 100%;
  flex-wrap: wrap;
  /* columns: 3; */
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: .4rem;
  grid-column-gap: .4rem;
  margin-bottom: 8rem;
}

@media screen and (max-width: 980px) {
  .project-list-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 700px) {
  .project-list-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

.project-list-wrap a.active {
  display: inline;
}

.services {
  padding:2rem;
}

@media screen and (max-width: 700px) {
.services {
  padding:1rem;
}
}

/* .sidebar-container {
  position:absolute;
  top:1rem;
  right:1rem;
  width:auto;
  height:fit-content;
  background:#292929;
  border:1px solid #ccc;
  border-radius:1rem;
} */

.sidebar-container {
    display: none;
}

.case-study-words {
    grid-area: content;
}

div#sidebar-container {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 100%;
  height: fit-content;
  background: #121212;
  position: sticky;
  padding: 1rem;
  border-left: 2px solid rgba(255,255,255,.2);
  border-radius: 0rem;
  grid-area: sidebar;
  opacity:.4;
  transition:all .5s ease;
  padding-top: 0rem;
  margin-top: 2rem;
}

div#sidebar-container:hover {
  opacity:1;
  transition:all .5s ease;
}

a.sidebar-link {
    font-size: 1.125rem;
}

div#sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  row-gap: 1rem;
}

@media screen and (max-width: 900px) {
.case-study-content-withsidebar {
  grid-template-areas:
  'sidebar'
  'content';
  grid-template-columns:100%;
  grid-template-rows:1fr 100%;
}

  div#sidebar-container {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 100%;
  height: fit-content;
  background: #121212;
  position: relative;
    margin-bottom:2rem;
  padding: 1rem;
  border-bottom: 2px solid rgba(255,255,255,.2);
    border-left:none;
  border-radius: 0rem;
  grid-area: sidebar;
}
}

#sidebar-container h4 {
    color:var(--color-text-main);
    font-size: 1.12rem;
    font-family: 'ApfelBold';
    margin: 0rem;
    margin-bottom: 1rem;
}

.case-study-content p a {
  font-size: 1.5rem;
}

.case-study-words p a {
  font-size: 1.5rem;
}

.selector {
    width: 100%;
    margin-bottom:4rem;
}

.piece.index-row {
  display: grid;
  grid-template-columns: 5fr 4fr;
  padding-top: 1rem;
  border-top: 1px solid #454545;
  /* position:sticky; */
  /* top: 4rem; */
  background: #121212;
  padding-bottom:1rem;
}

@media screen and (max-width: 1024px) {
  .piece.index-row {
    grid-template-columns: 5fr 5fr;
  }
}

@media screen and (max-width: 700px) {
  .piece.index-row {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
  }
}

.info {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* background: red; */
  justify-content: space-between;
}

@media screen and (max-width: 700px) {
  .info {
    justify-content: flex-start;
    /* min-height: 4rem; */
    grid-row-gap: 1.5rem;
  }
}

.index-row .tags {
  background: none;
  padding: 0px;
  margin-left: 1rem;
  opacity: .6;
}

@media screen and (max-width: 1024px) {
  .index-row .tags {
    margin-left: 0rem;
  }
}

.upper-content {
  display: flex;
}

@media screen and (max-width: 1024px) {
  .upper-content {
    display: flex;
    flex-direction:column;
  }
}

.lower-content {
  display: flex;
  row-gap: 1rem;
  flex-direction: row;
}

.index-row .alottment {
    opacity: 0;
    position: relative;
    /* row-gap: 1rem; */
    /* display: flex; */
    /* left: auto; */
    /* margin-left: 1rem; */
}

.index-row .alottment.year {
    margin-left: .5rem;
}

.index-row.piece:hover .alottment.year {
  opacity: 1;
  transform: translateX(16px);
  transition: var(--easing-quint);
}

.index-row.piece:hover .alottment {
  opacity: 1;
  transform: none;
  transition: var(--easing-quint);
}

.work-wrap.rolodex {
  grid-row-gap:0rem;
}