:root {
  --background: #0d0e0e;
  --text-main: #e0e5e6;
  --white: white;
  --text-secondary: silver;
  --transparent: transparent;
  --text-tertiary: #a3a3a3;
  --red: #ff8d8f;
  --highlight: #ffed63;
  --link: #b2e7ff;
  --stroke: #2f3133;
  --green: #6cffac;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-layout {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.w-layout-cell {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3b79c3;
}

.w-embed-youtubevideo {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/youtube-placeholder.2b05e7d68d.svg');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.w-embed-youtubevideo:empty {
  min-height: 75px;
  padding-bottom: 56.25%;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  background-color: var(--background);
  color: var(--text-main);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

a {
  color: #e6e6e6;
  text-decoration: none;
}

img {
  border-radius: 0;
  max-width: 100%;
  display: inline-block;
}

.home-section {
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: stretch;
  max-width: 100%;
  padding-top: 2rem;
  padding-left: 4rem;
  padding-right: 4rem;
  display: flex;
}

.home-container {
  text-align: left;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 1200px;
  max-width: 100%;
  padding-left: 2rem;
  display: flex;
}

.heading {
  color: var(--white);
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  font-family: Inter, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
}

.heading.footer {
  margin-bottom: 0;
  margin-right: 0;
  font-family: DM Sans, sans-serif;
  font-size: 2rem;
  font-weight: 600;
}

.heading.timeline {
  color: var(--text-main);
  text-align: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 6rem;
  font-family: DM Sans, sans-serif;
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 600;
}

.heading.home-bio {
  z-index: 2;
  color: var(--text-secondary);
  margin-top: 0;
  margin-bottom: 3rem;
  margin-left: 0;
  font-family: DM Sans, sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.3;
}

.heading.home-bio.title {
  color: var(--transparent);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  margin-bottom: .2rem;
}

.heading.about {
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: DM Sans, sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.3;
}

.heading.about.bio {
  color: var(--text-secondary);
  margin-top: 0;
  margin-bottom: 2.5rem;
  font-family: Inter, sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.3;
}

.heading.timeline-subtitle {
  color: #848484;
  text-align: center;
  margin-bottom: 1rem;
  font-size: .9rem;
  font-weight: 300;
}

.heading.process {
  text-align: left;
  text-shadow: 0 3px 4px #202225;
  margin-top: 1.4rem;
  margin-bottom: 1rem;
  font-family: DM Sans, sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
}

.heading.process.side-project {
  text-align: center;
}

.heading.process.highlights {
  margin-bottom: 2rem;
}

.heading.process.impact {
  color: #dcffeb;
}

.heading.home {
  color: var(--text-main);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#fff 40%, #a1a6ad);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 0;
  margin-bottom: 0;
  font-family: DM Sans, sans-serif;
  font-size: 2.2rem;
  font-style: normal;
}

.heading.home.testimonial {
  text-align: center;
  margin-bottom: .6rem;
}

.heading.table-content {
  color: var(--text-tertiary);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 300;
}

.heading.table-content.the-problem {
  color: var(--red);
}

.heading.table-content.highlights {
  color: var(--highlight);
}

.heading.testimonials {
  color: var(--text-main);
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 300;
}

.heading-2 {
  color: var(--text-main);
  align-self: auto;
  margin-top: 0;
  margin-bottom: 20px;
  padding-top: 0;
  font-family: Inter, sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.3;
  display: inline-block;
}

.heading-2.line-2 {
  margin-left: 0;
  font-size: 1.4rem;
  line-height: 1.3;
  display: inline-block;
}

.heading-2.line-3 {
  margin-left: 0;
}

.body {
  color: var(--text-main);
  font-family: Inter, sans-serif;
  font-weight: 300;
}

.outer-container {
  background-image: linear-gradient(90deg, var(--background), var(--background) 0%, #444 15%, #ccc 40%, #cacaca 50%, #ccc 60%, #444 85%, var(--background));
  text-align: left;
  justify-content: center;
  align-items: center;
  max-width: 1080px;
  margin-left: 0;
  margin-right: 0;
  padding: 16px 0;
  display: block;
  overflow: hidden;
}

.outer-container.achievements {
  background-image: none;
  order: 0;
  justify-content: center;
  align-self: auto;
  align-items: center;
  max-width: 1080px;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}

.outer-container.test {
  background-image: none;
}

.inner-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-wrap: nowrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  width: 100%;
  display: block;
}

.heading-3 {
  aspect-ratio: auto;
  color: var(--background);
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  object-fit: fill;
  flex-flow: row;
  flex: 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 20px;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  display: inline-block;
}

.heading-3.test {
  color: var(--text-main);
}

.text-span {
  font-size: 34px;
}

.text-span-2 {
  font-size: 26px;
}

.text-span-3 {
  font-size: 22px;
}

.line-4 {
  align-items: center;
  margin-top: 0;
  margin-left: 12px;
  display: flex;
}

.image {
  margin-right: 12px;
  padding-bottom: 12px;
  padding-right: 0;
}

.text-span-4 {
  font-size: 22px;
}

.home-description {
  font-size: 1.4rem;
  line-height: 1.3;
}

.text-span-6 {
  font-size: 34px;
}

.line-1 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: flex-start;
  max-width: 100%;
  margin-bottom: 12px;
  margin-left: 12px;
  display: flex;
}

.flux-logo {
  height: 30px;
  margin-bottom: 10px;
  margin-left: 12px;
}

.purdue-logo {
  aspect-ratio: auto;
  object-fit: contain;
  flex: none;
  align-self: center;
  max-width: 100%;
  margin-bottom: 18px;
  margin-right: 12px;
  display: block;
}

.text-span-7 {
  font-size: 28px;
}

.future-text {
  font-family: Exo, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  display: inline;
}

.text-span-9 {
  font-family: Exo, sans-serif;
  font-size: 26px;
  font-weight: 500;
  text-decoration: none;
}

._4-years-text {
  color: var(--text-main);
  font-family: DM Serif Text, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
}

.text-span-11, .text-span-12, .text-span-13, .text-span-14, .text-span-15 {
  font-weight: 700;
}

.home-intro-container {
  width: 35%;
  max-width: 100%;
  padding-top: 6rem;
}

.sub-container-2 {
  flex: 0 auto;
  order: 1;
  justify-content: flex-end;
  align-self: auto;
  width: 45%;
  max-width: 45%;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 0;
  padding-right: 0;
  display: flex;
}

.text-span-16 {
  display: inline;
}

.home-portrait-image {
  display: block;
  position: relative;
  bottom: -1.9rem;
}

.home-portrait-image.overlay {
  position: absolute;
}

.navbar {
  background-color: #0000;
  flex-direction: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: static;
}

.nav-button {
  color: var(--text-main);
  vertical-align: baseline;
  border: 1px #000;
  border-radius: 100px;
  flex-flow: row;
  margin-top: 4px;
  margin-bottom: 4px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  transition: background-color .3s;
  display: inline-block;
}

.nav-button:hover, .nav-button.w--current {
  color: var(--white);
  background-color: #242527;
}

.nav-button.email {
  color: var(--link);
}

.nav-button.link {
  color: var(--text-tertiary);
  padding: 13px 22px 11px 20px;
  line-height: 1.3;
}

.nav-button.link:hover {
  color: var(--white);
}

.nav-about {
  color: var(--white);
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 16px;
}

.nav-about:hover {
  background-image: radial-gradient(circle, #3f3f3f99, #fff0 90%);
}

.nav-about.w--current {
  color: var(--white);
  background-image: radial-gradient(circle, #3f3f3f99, #fff0 90%);
  font-weight: 500;
}

.nav-link-3 {
  color: var(--white);
}

.infinite-scroll-section {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin: 80px 0;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
}

.body-home {
  background-image: none;
  padding-left: 0;
  padding-right: 0;
}

.image-5 {
  margin-left: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  transition: all .4s;
}

.image-5:hover {
  transform: scale(1.05);
}

.nav-outer-container {
  z-index: 100;
  background-image: linear-gradient(90deg, #353738f0, #45494bf0 10%, #2d2f30f0);
  border-radius: 32px;
  flex: 0 auto;
  justify-content: space-between;
  align-self: center;
  align-items: center;
  width: 92vw;
  max-width: 1200px;
  margin-top: 12px;
  padding: 1px;
  position: fixed;
  box-shadow: 0 2px 6px #0003;
}

.projects-section {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin-top: -4rem;
  margin-bottom: 8rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
}

.projects-section.side-projects {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  margin-top: 0;
  margin-bottom: 0;
}

.projects-section.testimonials {
  margin-top: 0;
  margin-bottom: 4rem;
  padding-top: 8rem;
}

.projects-section.testimonials.about-page {
  margin-bottom: -4rem;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.image-6 {
  flex: 0 auto;
  align-self: auto;
  display: block;
}

.project-container {
  z-index: 2;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  pointer-events: auto;
  cursor: pointer;
  background-color: #121314;
  border-radius: 32px;
  flex-flow: column;
  flex: 0 auto;
  order: 0;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  place-content: stretch flex-start;
  align-self: auto;
  place-items: flex-start stretch;
  width: 100%;
  max-width: 100%;
  padding-bottom: 2rem;
  padding-left: 6rem;
  padding-right: 6rem;
  transition: all .3s;
  display: flex;
  position: static;
  box-shadow: inset 0 0 40px 4px #eff8ff0f;
}

.project-container:hover {
  box-shadow: inset 0 0 80px #eff8ff1a;
}

.project-container.side-project {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  order: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-content: stretch;
  align-self: flex-start;
  justify-items: stretch;
  width: 1080px;
  display: grid;
}

.project-container.side-projects {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.project-container.side {
  cursor: pointer;
  object-fit: fill;
  max-width: 100%;
  height: 100%;
  padding-bottom: 2rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: block;
  position: static;
  box-shadow: inset 0 0 40px 8px #ffffff14;
}

.project-container.side:hover {
  box-shadow: inset 0 0 80px 12px #ffffff1a;
}

.project-container.next-project {
  cursor: pointer;
  max-width: 100%;
  padding-left: 5rem;
  padding-right: 5rem;
}

.project-container.bs-features:hover {
  background-color: #151a1f;
  box-shadow: inset 0 0 80px 8px #3e8dd65e;
}

.project-container.new-features {
  box-shadow: inset 0 0 40px 8px #701eb814;
}

.project-heading-home {
  color: var(--text-secondary);
  text-align: left;
  align-self: flex-start;
  margin-top: 0;
  margin-bottom: 1.6rem;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.5;
  display: block;
}

.project-heading-home.page {
  color: var(--white);
  text-align: center;
  text-shadow: 0 6px 4px #131416;
  align-self: center;
  margin-top: 1rem;
  margin-bottom: 0;
  margin-right: 0;
  padding-top: 0;
  font-family: DM Sans, sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  display: block;
}

.project-heading-home.side-project {
  align-self: flex-start;
  margin-bottom: 0;
  font-size: 1rem;
}

.project-description {
  color: var(--text-tertiary);
  margin-bottom: 0;
  margin-right: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
}

.project-description.side-project {
  margin-bottom: 0;
  font-size: 18px;
}

.project-description.page {
  color: var(--text-tertiary);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
  display: block;
}

.project-description.page.number {
  margin-bottom: 0;
  padding-right: 12px;
  display: inline;
}

.project-description.page.my-role {
  margin-bottom: 12px;
}

.project-description.page-copy {
  margin-top: 0;
}

.project-description.home {
  text-align: center;
  align-self: auto;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.project-description.home.side {
  text-align: left;
}

.project-description.number {
  margin-right: 16px;
  font-family: DM Sans, sans-serif;
  font-size: 2rem;
  font-weight: 900;
}

.hero-text-container {
  flex-flow: column;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: flex-start;
  max-width: 100%;
  display: flex;
}

.hero-text-container.side {
  max-width: 100%;
}

.media-container {
  flex-flow: column;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  max-width: 1200px;
  margin-bottom: 10rem;
  display: flex;
}

.media-container.home {
  width: 80%;
  max-width: 100%;
  margin-bottom: 40px;
  display: block;
}

.media-container.hero {
  max-width: 1200px;
  margin-bottom: 0;
  display: block;
}

.media-container.side-project {
  margin-top: -2rem;
  margin-bottom: 1rem;
}

.media-container.mrnola {
  justify-content: flex-start;
  align-items: center;
  max-width: 1280px;
  margin-bottom: 8rem;
  display: flex;
}

.media-container.landing-page {
  justify-content: flex-start;
  align-items: center;
}

.media-container.bs-highlights {
  max-width: 1000px;
  margin-bottom: 6rem;
  display: block;
}

.media-container.highlights-last {
  margin-bottom: 2rem;
}

.media-container.highlights {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 4rem;
}

.media-container.hero-copy {
  max-width: 1080px;
  margin-bottom: 0;
  display: block;
}

.media-container.overhanglab {
  margin-bottom: 4rem;
}

.media-container.last {
  margin-bottom: 0;
}

.media-container._1600 {
  max-width: 1600px;
}

.project-tag {
  background-color: #2e2e2e;
  background-image: linear-gradient(20deg, #222526, #343739 40% 60%, #222526);
  border-radius: 8px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 6px 12px;
  font-size: .9rem;
  line-height: 1.3;
  display: inline-block;
}

.project-tag.construction {
  color: #ffc966;
  background-image: linear-gradient(20deg, #2c2312, #362f22 40% 60%, #2c2312);
}

.project-tag.construction.end {
  margin-bottom: 1rem;
}

.project-type {
  color: #7e7e7e;
  text-align: left;
  justify-content: flex-end;
  align-self: flex-start;
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: .9rem;
  font-style: normal;
  line-height: 1.3;
  text-decoration: none;
  display: block;
}

.project-type.page {
  color: var(--text-tertiary);
  align-self: center;
  margin-top: 20px;
  font-size: .95rem;
}

.project-type.side {
  align-self: flex-start;
}

.project-type.testimonials {
  color: var(--text-secondary);
  text-align: right;
  align-self: flex-end;
  margin-top: 0;
  line-height: 1;
}

.heading-container {
  text-align: center;
  -webkit-text-fill-color: inherit;
  background-color: #1f1f1f;
  background-image: linear-gradient(130deg, #181818, #2c2c2c 40% 60%, #181818);
  background-clip: border-box;
  border-radius: 12px;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin-top: 0;
  margin-bottom: 8px;
  padding: 20px 60px;
  display: block;
}

.heading-container.home {
  border: 1px solid var(--stroke);
  border-radius: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.heading-container.home.first {
  object-fit: fill;
}

.heading-container.section-heading {
  background-image: radial-gradient(circle farthest-side at 50% -50%, #1d1e1f, #19191a 70%, var(--background) 98%);
  border-radius: 0;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 1.6rem 3rem;
  display: flex;
  box-shadow: 0 4rem 2rem -2rem #0003;
}

.heading-container.section-heading.the-problem {
  box-shadow: none;
  background-color: #0000;
  background-image: none;
  border-style: none;
  margin-bottom: 0;
  padding-top: 0;
}

.heading-container.section-heading.impact {
  background-color: var(--transparent);
  color: #dcffeb;
  background-image: radial-gradient(circle at 50% 0, #122d1e, #0b1811);
  border: 1px solid #48a370;
  border-radius: 20px;
  flex-flow: column;
  margin-bottom: 4rem;
  padding: 1.6rem 4rem 3rem;
  box-shadow: inset 0 0 40px #acffd033;
}

.heading-container.section-heading.highlights {
  background-color: #121110;
  background-image: none;
  border: 1px solid #909078;
  border-radius: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 1200px;
  margin-bottom: 0;
  box-shadow: inset 0 0 40px #ffed6333;
}

.heading-container.section-heading.highlights.testimonials {
  width: 1080px;
  margin-bottom: 8rem;
  padding-bottom: 2rem;
}

.heading-container.section-heading.problem {
  background-image: linear-gradient(90deg, var(--background), #2b1918 20%, #331e1c 50%, #2b1918 80%, var(--background));
}

.heading-container.section-heading.problem.test {
  background-image: linear-gradient(90deg, var(--background), #241817 20%, #241817 80%, var(--background));
  max-width: 100%;
  box-shadow: none;
  border-style: solid none;
  border-radius: 0;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.heading-container.section-heading.next-steps {
  background-color: #0e1215;
  background-image: radial-gradient(circle at 50% 0, #192229, #0e1215);
  border: 1px solid #88a4b9;
  border-radius: 20px;
  flex-flow: column;
  margin-bottom: 10rem;
  padding: 1.6rem 4rem 3rem;
  box-shadow: inset 0 0 40px #88a4b933;
}

.heading-container.section-heading.client-work {
  background-image: radial-gradient(circle farthest-side at 50% 24%, #242424, var(--background));
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.heading-container.user {
  background-image: linear-gradient(130deg, #181818, #202020 40% 60%, #181818);
}

.heading-container.side-project {
  border: 1px solid var(--stroke);
  border-radius: 20px;
  margin-bottom: 60px;
  padding-top: 20px;
  padding-bottom: 40px;
}

.side-projects-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: auto;
  max-width: 1080px;
  margin-top: 0;
  display: block;
}

.side-projects-heading {
  margin-top: 35px;
  padding-top: 0;
  font-size: 28px;
  font-weight: 500;
}

.cell {
  cursor: pointer;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 35px;
  transition: box-shadow .5s;
}

.cell:hover {
  box-shadow: inset 0 0 100px #303030;
}

.quick-stack {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  padding: 0;
}

.text-span-17, .text-span-18, .text-span-19, .text-span-20 {
  font-weight: 300;
}

.project-heading-italic.of-text {
  color: #636363;
  font-style: normal;
}

.heading-text-bold {
  color: var(--text-main);
  font-weight: 500;
}

.text-span-23 {
  font-weight: 300;
}

.nav-bar-text {
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
}

.nav-bar-text:hover {
  text-decoration: none;
}

.icon {
  color: var(--white);
  margin-right: 12px;
}

.icon:focus {
  position: absolute;
  transform: none;
}

.dropdown-toggle {
  border-radius: 100px;
  margin-top: 4px;
  margin-bottom: 4px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 34px;
  transition: background-color .3s;
}

.dropdown-toggle:hover {
  color: var(--white);
  background-color: #242527;
  text-decoration: none;
}

.dropdown-link {
  pointer-events: auto;
  color: var(--white);
  border: 1px #242424;
  border-radius: 100px;
  margin-bottom: 0;
  margin-left: 4px;
  margin-right: 4px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 300;
  transition: background-color .3s;
}

.dropdown-link:hover, .dropdown-link.w--current {
  color: var(--white);
  background-color: #242527;
}

.dropdown-link.resume {
  color: var(--background);
  background-image: linear-gradient(130deg, #b6b6b6, #fff 50%, #b6b6b6);
  border: 1px solid #fff;
  margin-bottom: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 700;
  transition: all .2s;
}

.dropdown-link.resume:hover {
  opacity: 1;
  border-radius: 5px;
}

.dropdown-link.resume.w--current {
  background-color: var(--stroke);
  color: var(--white);
  font-weight: 600;
}

.dropdown-link.top {
  margin-top: 2px;
}

.dropdown-link.top:hover, .dropdown-link.top:focus {
  color: var(--white);
}

.dropdown-link.email {
  color: var(--link);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  font-weight: 500;
}

.dropdown-link.bottom {
  margin-top: 2px;
  margin-bottom: 4px;
  padding-bottom: 10px;
}

.dropdown-list {
  background-color: #24242499;
  border-radius: 12px;
}

.dropdown-list.w--open {
  z-index: 100;
  background-color: #242424;
  border: 1px solid #32373a;
  border-radius: 8px;
  margin-top: 0;
  right: -46%;
}

.dropdown-list.projects {
  overflow: hidden;
}

.dropdown-list.projects.w--open {
  z-index: 100;
  background-color: #191b1d;
  border-radius: 26px;
  margin-top: -4px;
  left: -114%;
  right: auto;
  box-shadow: 0 0 8px #0006;
}

.dropdown {
  transition: background-color .5s;
}

.dropdown:hover {
  opacity: 1;
  -webkit-text-fill-color: inherit;
  background-color: #0000;
  background-image: radial-gradient(circle, #3f3f3f99, #fff0 90%);
  background-clip: border-box;
  text-decoration: none;
}

.dropdown:focus {
  background-image: radial-gradient(circle, #3f3f3f99, #fff0);
}

.dropdown.work {
  border-radius: 12px;
  transition-duration: .3s;
}

.dropdown.work:hover {
  background-image: none;
}

.dropdown.about {
  display: none;
}

.dropdown.about:hover {
  background-image: none;
}

.brand, .brand.w--current {
  order: -1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.project-hero-image-home {
  perspective: none;
  max-width: 100%;
  transform: none;
}

.footer-section {
  border-top: 1px solid var(--stroke);
  background-color: var(--background);
  max-width: 100%;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 3rem;
  padding-right: 3rem;
}

.footer-container {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 900px;
  padding-top: 4rem;
  padding-bottom: 5rem;
  display: flex;
}

.heading-5 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 300;
  display: block;
}

.heading-5.footer {
  color: var(--text-secondary);
  font-size: 1rem;
}

.heading-5.achievements {
  color: #7c7c7c;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 8px;
  margin-left: 0;
  font-size: 20px;
}

.button {
  background-color: #333;
  border: 1px solid #444;
  border-radius: 6px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
}

.button.social {
  background-color: #0000;
  margin: 15px 0 0;
  padding: 12px 20px;
}

.div-block {
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  display: flex;
}

.link-text {
  color: var(--text-secondary);
  margin-top: 2px;
  margin-bottom: 0;
  margin-right: 30px;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
}

.link-text:hover {
  text-decoration: underline;
}

.link-text.no-underline {
  text-decoration: none;
}

.link-block {
  justify-content: flex-start;
  align-items: center;
  margin-top: 12px;
  text-decoration: none;
  display: flex;
}

.link-icon {
  border-radius: 0;
  margin-right: 10px;
}

.div-block-2 {
  display: flex;
}

.footer-containe {
  max-width: 720px;
}

.footer-quick-stack {
  padding: 0;
}

.text-span-24 {
  font-size: 1.4rem;
}

.container {
  justify-content: center;
  align-items: flex-start;
  max-width: 1280px;
  margin-top: 0;
  display: block;
}

.container.user-feedback {
  flex-flow: column;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
}

.section {
  padding-left: 40px;
  padding-right: 40px;
}

.about-section {
  padding-top: 0;
  padding-left: 4rem;
  padding-right: 4rem;
}

.about-container {
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin-bottom: 6rem;
  display: flex;
}

.about-container.timeline {
  width: 720px;
  max-width: 100%;
  margin-bottom: 0;
  padding-top: 6rem;
  display: block;
}

.about-paragraph {
  font-size: 1rem;
  line-height: 1.5;
}

.about-paragraph.timeline {
  color: var(--text-main);
  margin-bottom: 0;
  display: block;
}

.about-paragraph.timeline-copy {
  font-size: 18px;
}

.about-paragraph.link {
  color: var(--text-main);
  font-size: 18px;
}

.about-paragraph.timeline-copy-copy {
  margin-bottom: 0;
  font-size: 18px;
}

.about-paragraph.second {
  margin-bottom: 1rem;
  line-height: 1.4;
}

.about-right-section {
  align-self: center;
  margin-left: 4rem;
  margin-right: 0;
  transform: skew(1deg);
}

.timeline-stack {
  grid-column-gap: 0px;
  grid-row-gap: 6rem;
  flex: 1;
  align-self: flex-start;
  margin-bottom: 8rem;
  padding: 0;
}

.timeline-date {
  color: var(--white);
  text-align: right;
  align-self: flex-start;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  font-family: DM Sans, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  position: static;
  top: 50vh;
}

.timeline-month {
  font-style: italic;
}

.text-span-26 {
  font-weight: 300;
}

.link {
  display: block;
}

.html-link {
  color: var(--link);
  text-underline-offset: 3px;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
}

.html-link:hover {
  text-decoration: underline;
}

.div-block-4 {
  align-items: flex-start;
  display: block;
}

.lucky-garden {
  border: 1px solid #bebebe;
  margin-top: 12px;
  margin-left: 0;
}

.timeline-cell {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 0;
}

.div-block-5 {
  align-items: center;
  display: flex;
}

.timeline-picture {
  border: 1px solid #bebebe;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.timeline-picture.xchange, .timeline-picture.flux-group {
  width: 100%;
}

.cell-3 {
  padding-bottom: 20px;
}

.flux, .image-9 {
  border: 1px solid #bebebe;
  border-radius: 4px;
  margin-top: 12px;
}

.nav-menu {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  order: 1;
  justify-content: flex-start;
  align-items: center;
  margin-left: 4rem;
  display: flex;
}

.about-picture {
  object-fit: cover;
  border: 1px solid #bebebe;
  border-radius: 20px;
  max-width: 40%;
}

.about-picture.left {
  transform-style: preserve-3d;
  transform: rotateX(4deg)rotateY(4deg)rotateZ(-1deg);
  box-shadow: -4px 4px 18px -4px #525759;
}

.about-picture.right {
  max-width: 40%;
  transform-style: preserve-3d;
  transform: rotateX(-4deg)rotateY(4deg)rotateZ(1deg);
  box-shadow: 4px 4px 18px -4px #525759;
}

.about-left-section {
  flex-flow: column;
  order: 0;
  align-self: center;
  margin-left: 0;
  margin-right: 4rem;
  padding-right: 0;
  display: flex;
  transform: skew(-1deg);
}

.project-section {
  max-width: 100%;
  color: var(--text-main);
  text-align: left;
  padding-left: 3rem;
  padding-right: 3rem;
}

.project-section.top {
  background-image: linear-gradient(180deg, #1d1e20, var(--transparent));
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.project-section.top.side-projects {
  margin-bottom: 40px;
}

.project-section.top-2 {
  background-color: var(--transparent);
  color: var(--text-main);
}

.container-2 {
  max-width: 1080px;
}

.project-overview {
  max-width: 1200px;
  display: block;
}

.project-overview.top {
  border: 0 #333;
  border-radius: 0;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  margin-bottom: 0;
  padding: 12rem 3rem 2rem;
  display: flex;
}

.project-overview.top.about {
  padding-bottom: 10rem;
}

.type-and-date {
  justify-content: space-between;
  align-self: stretch;
  margin-top: 16px;
  display: flex;
}

.title {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
}

.description-title {
  color: #fdefff;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  font-family: DM Sans, sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3em;
  display: inline-block;
}

.description-icon-and-title {
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  margin-bottom: 8px;
  display: flex;
}

.description-icon-and-title.process {
  text-align: left;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
}

.description-icon {
  margin: -2px 8px 0 -8px;
  padding-top: 0;
  padding-bottom: 2px;
}

.project-info-grid {
  grid-column-gap: 80px;
  margin-top: 40px;
  padding: 0;
}

.project-info-cell {
  padding-right: 0;
}

.cell-6 {
  padding-right: 20px;
}

.task-cell {
  flex-direction: row;
  padding-right: 12px;
}

.tasks-grid {
  grid-row-gap: 0px;
  padding: 0;
}

.task-number {
  color: var(--text-main);
  font-weight: 500;
}

.project-hero-image {
  max-width: 1080px;
  margin-bottom: 20px;
}

.text-span-27 {
  color: var(--text-main);
  font-style: normal;
  font-weight: 500;
}

.text-span-28, .project-description-bold {
  color: var(--text-main);
  font-weight: 500;
}

.paragraph {
  color: var(--text-tertiary);
  text-align: left;
  margin-top: .6rem;
  font-size: 1rem;
  line-height: 1.3;
}

.paragraph.image {
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 40px;
  margin-bottom: 0;
  margin-right: 0;
  padding-bottom: 0;
  padding-left: 80px;
  padding-right: 80px;
}

.paragraph.subtitle {
  text-align: left;
  border-radius: 4px;
  width: 90%;
  margin-top: 1.8rem;
  margin-bottom: 0;
  font-size: 1.2rem;
  line-height: 1.4;
}

.paragraph.subtitle.highlights {
  text-align: center;
  display: block;
}

.paragraph.subtitle.ador-context {
  text-align: center;
}

.paragraph.subtitle.color-sheet {
  width: 80%;
}

.paragraph.subtitle.handoff-specs {
  width: 60%;
}

.paragraph.subtitle.whats-next {
  margin-top: 3rem;
}

.paragraph.title {
  color: var(--white);
  text-align: left;
  align-self: auto;
  margin-top: 1.6rem;
  margin-bottom: 0;
  font-family: DM Sans, sans-serif;
  font-size: 1.6rem;
}

.paragraph.title.persona {
  color: var(--red);
  margin-top: .6rem;
  margin-bottom: .4rem;
  font-family: DM Sans, sans-serif;
  line-height: 1.2;
}

.paragraph.heading {
  color: var(--text-secondary);
  margin-bottom: .6rem;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 300;
}

.paragraph.heading.highlights {
  margin-bottom: 3rem;
  font-size: 1.1rem;
}

.paragraph.heading.the-problem {
  padding-left: 0;
  padding-right: 0;
}

.paragraph.heading.side-project {
  text-align: center;
  max-width: 1000px;
}

.paragraph.heading.end-credits {
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 3rem;
  font-weight: 200;
}

.paragraph.heading.client-work {
  margin-top: 3rem;
}

.paragraph.highlights {
  color: var(--text-secondary);
  margin-bottom: 4rem;
  font-size: 1.1rem;
}

.paragraph.highlights.slider-text {
  margin-top: 3rem;
}

.paragraph.highlights.ador {
  margin-top: 0;
  margin-bottom: 0;
}

.paragraph.highlights.about {
  margin-top: 0;
  margin-bottom: 0;
}

.paragraph.highlights.last {
  margin-bottom: 0;
}

.paragraph.about-flux {
  text-align: left;
}

.paragraph.about-beam-studio {
  text-align: left;
  width: 92%;
}

.paragraph.next-project {
  color: var(--text-main);
  text-align: center;
  margin: 0 2rem -8px;
  font-family: DM Sans, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
}

.paragraph.nav-project-title {
  color: var(--text-main);
  margin-top: 0;
  font-size: .9rem;
}

.paragraph.button-text {
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
}

.paragraph.testimonials {
  color: var(--text-secondary);
}

.paragraph.challenge {
  color: #ad9773;
}

.paragraph.impact {
  color: #dcffeb;
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
}

.paragraph.persona-caption {
  text-align: center;
}

.body-2 {
  background-color: var(--background);
}

.bs-problems {
  max-width: 1080px;
  display: inline-block;
}

.container-3 {
  max-width: 1080px;
}

.paragraph-2 {
  color: var(--text-secondary);
  text-align: center;
  font-size: 20px;
  line-height: 26px;
}

.button-main {
  border: 1px solid var(--white);
  background-color: var(--white);
  color: var(--background);
  text-align: left;
  background-image: linear-gradient(130deg, #b6b6b6, #fff 50%, #b6b6b6);
  border-radius: 60px;
  margin-top: 0;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition: all .3s;
}

.button-main:hover {
  opacity: 1;
  color: var(--background);
  border-radius: 60px;
  box-shadow: 0 0 12px #ffffff4d;
}

.button-main.resume {
  border: 1px solid var(--white);
  width: 186px;
  color: var(--background);
  text-align: center;
  background-color: #0000;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
}

.button-main.resume:hover {
  background-color: var(--white);
  color: var(--background);
  font-weight: 600;
}

.button-main.copy {
  margin-top: 0;
  padding: 4px 10px;
  font-size: .9rem;
}

.button-main.copy:active {
  transform: scale(.9);
}

.button-main.secondary {
  color: var(--text-main);
  background-color: #fff0;
  background-image: none;
  font-weight: 400;
}

.button-main.next-project {
  padding-left: 24px;
  padding-right: 16px;
  font-size: 1.2rem;
  transform: translate(0, 20px);
}

.button-main.srangsern {
  max-width: 100%;
}

.button-main.icon {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-right: 0;
  padding-left: 16px;
  display: flex;
}

.button-main.return-home.w--current {
  border-color: var(--text-main);
  background-color: var(--transparent);
  color: var(--text-main);
  background-image: none;
  padding: 8px 12px;
  font-size: .9rem;
  font-weight: 400;
}

.button-container {
  justify-content: flex-start;
  align-items: center;
  margin-top: 1.6rem;
  margin-bottom: 2rem;
  padding-top: 0;
  display: inline-flex;
}

.button-container.landing-page {
  justify-content: flex-start;
  align-items: center;
  margin-top: 28px;
  margin-bottom: 0;
  display: flex;
}

.button-container.ador {
  justify-content: flex-start;
  align-self: flex-start;
  align-items: center;
  margin-top: 1.2rem;
  margin-bottom: 0;
  display: flex;
}

.button-container.with-text {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border: 1px solid #4e4e4e;
  border-radius: 30px;
  align-self: center;
  margin-top: 1rem;
  padding: 8px 8px 8px 28px;
  box-shadow: inset 0 0 16px #ffffff1a;
}

.button-container.with-text.highlight-last {
  margin-bottom: 0;
}

.button-container.with-text.bs-web {
  background-color: var(--background);
  margin-top: 2rem;
}

.button-container.with-text.next-project {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--background);
  border-radius: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0 0;
  box-shadow: inset 0 0 16px #ffffff1a;
}

.button-container.with-text.about {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 360px;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-left: 8px;
  display: flex;
}

.button-container.srangsern {
  margin-top: 2rem;
  margin-bottom: 0;
}

.button-container._404 {
  justify-content: center;
  align-items: center;
}

.background-video {
  z-index: 1;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  display: block;
  overflow: hidden;
}

.background-video.beam-studio {
  margin-bottom: 24px;
}

.video-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.video-wrapper.home {
  margin-bottom: 20px;
}

.video {
  aspect-ratio: auto;
  border-radius: 12px;
  max-width: 80%;
}

.youtube {
  border-radius: 12px;
}

.background-video-2 {
  z-index: 1;
  border-radius: 12px;
}

.user-feedback-table {
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
  align-self: center;
  margin-top: 0;
  padding: 0;
}

.user-feedback-table.quotes {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  align-self: center;
  max-width: 1080px;
  margin-top: 0;
  margin-bottom: 100px;
  padding-left: 0;
  padding-right: 0;
}

.user-feedback-text {
  color: var(--text-secondary);
  text-align: left;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-style: italic;
  font-weight: 300;
  line-height: 26px;
}

.user-feedback-text.results {
  color: var(--text-main);
  text-align: left;
  margin-bottom: 0;
  font-size: 1.1rem;
  font-style: normal;
  line-height: 1.3;
}

.user-feedback-text.results.center {
  text-align: center;
  margin-top: 12px;
  font-size: 1.2rem;
}

.user-feedback-cell {
  justify-content: flex-start;
  align-items: flex-start;
}

.user-feedback-cell.quotes {
  border: 1px solid var(--stroke);
  background-color: #0000;
  border-radius: 12px;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 1.6rem 1.2rem 2rem;
  box-shadow: inset 0 0 20px #ffffff29;
}

.user-feedback-cell.center {
  justify-content: flex-start;
  align-items: center;
}

.user-feedback-cell.last {
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 8px;
  padding-right: 0;
}

.green-text {
  color: var(--green);
}

.red-text {
  color: var(--red);
}

.icon-arrow {
  height: 48px;
  margin-left: -22px;
  padding-right: 6px;
}

.icon-arrow.down {
  margin: -16px 0 12px;
  padding-right: 0;
  transform: rotate(90deg);
}

.icon-arrow.problem-to-solution {
  height: 32px;
  transform: rotate(90deg);
}

.arrow-cell {
  justify-content: center;
  align-items: center;
}

.title-and-description {
  grid-column-gap: 20px;
  padding: 0;
  display: flex;
}

.title-and-subtitle {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  margin-top: 40px;
  padding: 0;
}

.cell-7 {
  justify-content: center;
  align-items: flex-start;
}

.image-description {
  text-align: center;
  max-width: 1080px;
  margin-top: 40px;
  margin-bottom: 0;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
}

.image-description.side-project {
  width: 90%;
  max-width: 100%;
  color: var(--text-secondary);
  text-align: left;
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1.2rem;
}

.image-description.side-project.mrnola {
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.image-description.side-project.overhanglab {
  margin-top: 0;
  margin-bottom: 12px;
}

.image-description.side-project.baixian {
  text-align: center;
  margin-bottom: 32px;
}

.image-description.challenge {
  color: #e9cfa4;
  text-align: left;
  max-width: 100%;
  margin-top: .8rem;
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.5;
}

.task-bullet-point {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.my-approach-block {
  grid-row-gap: 1.4rem;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.task-image-wrapper {
  align-self: center;
  max-width: 50%;
  display: block;
}

.small-container {
  background-color: var(--background);
  border: 1px solid #fad8ff;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-top: 4rem;
  padding: 2rem 2rem 1.8rem 3rem;
  display: flex;
  box-shadow: inset 0 0 40px #de85ff1f;
}

.small-container.the-problem {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  max-width: 1080px;
  padding-top: 1.6rem;
}

.small-container.the-problem.ador {
  width: 92%;
  max-width: 1080px;
  margin-top: 2.2rem;
}

.small-container.challenge {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color: var(--background);
  border-color: #534937;
  flex-flow: column;
  justify-content: flex-start;
  align-self: center;
  align-items: flex-start;
  box-shadow: inset 0 0 40px #8e6b3340;
}

.process {
  border-radius: 8px;
}

.process-image {
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 8px;
  max-width: 100%;
  height: 100%;
  display: block;
}

.project-tab-div {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  margin-top: 0;
  display: flex;
}

.subtitle-heading {
  border-bottom: 1px solid var(--text-tertiary);
  color: var(--white);
  margin-right: 6px;
  font-family: Inter, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  display: inline;
}

.link-block-2 {
  text-decoration: none;
}

.project-container-link {
  cursor: auto;
}

.arrow {
  border: 1px #000;
  height: 50px;
}

.arrow-button {
  z-index: 0;
  opacity: 1;
  cursor: pointer;
  margin-bottom: 3rem;
  margin-right: 4rem;
  display: inline-block;
  position: absolute;
  inset: auto 0% 0% auto;
  overflow: visible;
}

.arrow-button.side-project {
  position: relative;
  bottom: -36px;
  left: 354px;
}

.arrow-button.side-project-button {
  margin-bottom: 28px;
  margin-right: 40px;
}

.project-wrapper {
  background-image: linear-gradient(90deg, var(--stroke), #646464 50%, var(--stroke));
  pointer-events: auto;
  cursor: auto;
  border-radius: 34px;
  width: 100%;
  max-width: 1200px;
  margin-top: 1rem;
  padding: 2px 1px;
  transition: opacity .2s;
  position: relative;
}

.project-wrapper.side {
  max-width: 100%;
}

.project-wrapper.next-project {
  width: 100%;
}

.project-wrapper.next-project.w--current {
  justify-content: flex-start;
  align-items: flex-start;
  width: 80%;
  display: block;
}

.project-wrapper.bs-features {
  transition: background-color .3s;
}

.project-wrapper.bs-features:hover {
  background-image: linear-gradient(90deg, #50728a, #9cd6ff 50%, #50728a);
}

.side-project-image {
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  display: inline-block;
}

.side-project-image.baixian {
  height: 320px;
}

.side-project-image.acorn {
  object-fit: contain;
  width: 80%;
}

.side-project-image.qts {
  width: 90%;
}

.side-projects-row {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin-top: 3rem;
  display: flex;
}

.side-projects-row.last {
  margin-top: 1rem;
}

.side-projects-description {
  color: var(--text-secondary);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.3;
}

.side-projects-page {
  padding-top: 12rem;
  padding-left: 40px;
  padding-right: 40px;
}

.side-projects-page.first {
  padding-top: 0;
}

.side-project-text {
  font-style: italic;
}

.side-project-info {
  color: var(--text-tertiary);
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1rem;
}

.typedjs-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: block;
}

.typedjs-repeats {
  display: inline;
}

.text-color-grey {
  color: #fbf9fc80;
}

.line-2, .line-3 {
  margin-left: 12px;
}

.div-block-10 {
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
  display: flex;
}

.srangsern {
  max-width: 90%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.background-video-3 {
  border-radius: 8px;
  width: 680px;
  max-width: 100%;
  height: 302px;
}

.email-field {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.fs-copyclip_button {
  color: #fff;
  text-align: center;
  background-color: #5c2aff;
  border-radius: 500px;
  padding: .6rem 2rem .65rem;
}

.fs-copyclip_button:hover {
  background-color: #6739ff;
}

.fs-copyclip_wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  place-items: center start;
  display: grid;
  position: relative;
}

.fs-copyclip_text {
  color: #acacac;
}

.footer-info {
  color: var(--text-tertiary);
  margin-top: 2rem;
  font-size: 1rem;
}

.dropdown-divider {
  border-top: 1px solid var(--stroke);
  height: 1px;
  margin: 0 20px;
}

.text-span-30 {
  font-weight: 300;
}

.mrnola-image {
  max-width: 800px;
  margin-bottom: 12px;
}

.mrnola-image.left {
  border-radius: 8px;
  max-width: 720px;
  margin-bottom: 20px;
  margin-right: 40px;
  transform: rotate(-.6deg);
}

.mrnola-image.right {
  border-radius: 8px;
  max-width: 720px;
  margin-bottom: 20px;
  margin-left: 40px;
  transform: rotate(.6deg);
}

.image-15 {
  border-radius: 8px;
}

.mrnola {
  border-radius: 8px;
  max-width: 580px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.text-maybe-bold {
  color: var(--white);
  font-weight: 500;
}

.overhanglab {
  border-radius: 20px;
  margin-top: 20px;
}

.heading-6 {
  font-weight: 600;
}

.side-project-heading {
  margin-top: 32px;
  margin-bottom: 32px;
  font-weight: 600;
}

.side-project-heading.youv-art {
  margin-top: 60px;
}

.side-project-subtext {
  font-weight: 300;
}

.video-polygon {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.polygon-video {
  z-index: 1;
  border-radius: 12px;
  width: 560px;
  max-width: 100%;
  height: 500px;
}

.polygon-video-copy {
  z-index: 1;
  border-radius: 4px;
  width: 420px;
  max-width: 100%;
  height: 370px;
}

.play-button {
  margin-bottom: 1rem;
  margin-right: 1.4rem;
  position: absolute;
  inset: auto 0% 0% auto;
}

.pause-image {
  opacity: .75;
  max-width: 100%;
  height: 48px;
  transition: opacity .3s;
}

.pause-image:hover {
  opacity: .5;
}

.play-image {
  opacity: .75;
  max-width: 100%;
  height: 4rem;
  transition: opacity .3s;
}

.play-image:hover {
  opacity: .5;
}

.media-container-copy {
  flex-flow: column;
  justify-content: center;
  align-self: center;
  align-items: center;
  max-width: 1080px;
  margin-bottom: 80px;
  display: block;
}

.media-container-copy.home {
  width: 60%;
  max-width: 60%;
  margin-bottom: 0;
}

.media-container-copy.hero {
  max-width: 1080px;
  margin-bottom: 0;
}

.media-container-copy.side-project {
  margin-bottom: 4px;
}

.media-container-copy.mrnola {
  justify-content: flex-start;
  align-items: center;
  max-width: 1080px;
  display: flex;
}

.elements-video {
  z-index: 1;
  border-radius: 12px;
  width: 560px;
  max-width: 100%;
  height: 568px;
}

.text-video {
  z-index: 1;
  border-radius: 12px;
  width: 560px;
  max-width: 100%;
  height: 632px;
}

.image-wrapper {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  display: flex;
}

.image-wrapper.vertical {
  flex-flow: column;
}

.image-wrapper.ador {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
}

.layers-image {
  border-radius: 12px;
  width: 560px;
}

.home-description-text {
  color: var(--text-tertiary);
  flex-flow: row;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.3;
  display: block;
}

.flux-logo-text {
  opacity: .9;
  color: #fff0;
  background-image: url('../images/icon_FLUX-logo.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
  margin-left: 6px;
  padding-right: 6px;
  font-size: .9rem;
  display: inline-block;
}

.purdue-logo-text {
  opacity: .9;
  color: #fff0;
  background-image: url('../images/PU-H-Full-Rev-RGB.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 6px;
  font-size: 1.14rem;
  line-height: 1.3;
  display: inline-block;
}

.acorn {
  border-radius: 20px;
  width: 90%;
  max-width: 100%;
}

.acorn-sketches {
  width: 65%;
  max-width: 100%;
  margin-bottom: -40px;
}

.acorn-guide {
  border-top-left-radius: 20px;
  width: 100%;
  max-width: 50%;
}

.acorn-guide.right {
  border-top-left-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.acorn-images-wrapper {
  background-color: var(--white);
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  border-radius: 20px;
  flex-flow: row;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.sam-mei-logo {
  width: 8rem;
  transition: all .3s;
}

.sam-mei-logo:hover {
  transform: scale(1.06);
}

.view-the-project-link {
  color: var(--white);
  font-style: normal;
  font-weight: 500;
  line-height: 2;
  text-decoration: underline;
}

.view-the-project-link:hover {
  text-decoration: none;
}

.image-16 {
  max-width: 100%;
}

.side-bar-wrapper {
  grid-column-gap: .4rem;
  grid-row-gap: .4rem;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: 1rem 2rem;
  display: flex;
  position: relative;
}

.side-bar-link {
  border: 1px solid var(--transparent);
  color: #7c7c7c;
  text-align: center;
  border-radius: 100px;
  margin-bottom: 0;
  padding: 6px 12px;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1;
}

.side-bar-link:hover {
  color: var(--text-main);
}

.side-bar-link.w--current {
  border-color: var(--white);
  background-image: linear-gradient(130deg, #b6b6b6, var(--white) 50%, #b6b6b6);
  color: var(--background);
  text-align: center;
  border-radius: 100px;
  font-weight: 400;
}

.side-bar-container {
  z-index: 90;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background-image: linear-gradient(90deg, var(--background), #232526 40%, #232526 60%, var(--background));
  justify-content: center;
  align-items: flex-end;
  max-width: 100%;
  position: sticky;
  inset: auto 0% -2px;
  box-shadow: 0 2rem 2rem -2rem #0006;
}

.progress-bar {
  background-color: var(--text-main);
  width: 100%;
  height: 2px;
  position: absolute;
  inset: 0% 0% auto;
}

.beam-studio-webpage {
  border-radius: 8px;
  width: 1000px;
  margin-bottom: 0;
}

.tech-text {
  color: var(--white);
  text-shadow: 0 0 12px #fff3;
  margin-right: 2px;
  font-family: DM Sans, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
}

.bs-library-image {
  border-radius: 8px;
  width: 90%;
}

.bs-library-image.old {
  width: 58%;
}

._16-to-9-video {
  z-index: 1;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: block;
}

._16-to-9-video.beam-studio {
  margin-top: 20px;
}

._16-to-9-video.ador-highlight {
  width: 1182px;
  height: 664px;
}

._16-to-9-video.bento {
  height: 624px;
}

.mobile-image {
  object-fit: contain;
  border-radius: 8px;
  width: 20%;
  margin-right: -12px;
}

.media-with-mobile-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.italic-launch-time {
  color: var(--text-main);
  font-style: italic;
}

.launch-time-bold {
  color: var(--text-main);
  font-weight: 400;
}

.overview-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-flow: row;
  margin-top: 6rem;
  margin-bottom: 6rem;
  display: flex;
}

.role-team-timeline {
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
  flex-flow: column;
  max-width: 100%;
  display: flex;
}

.overview-subtitle {
  color: var(--white);
  font-family: DM Sans, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.8;
  display: inline;
}

.overview {
  max-width: 50%;
}

.baixian-image {
  border-radius: 20px;
  width: 80%;
}

.side-project-hero {
  width: 32rem;
  display: inline-block;
}

.project-tag-wrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: center;
  display: flex;
}

.colorpicker-image, .properties-image, .cloud-image {
  margin-top: 12px;
}

.slide-1.bs-hero {
  background-image: url('../images/BS-Features-Cat.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slide-1.ador {
  background-image: url('../images/Ador-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slide-1.bs-redesign {
  background-image: url('../images/BS-Redesign-1.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slide-1.firmware {
  background-image: url('../images/Firmware-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slider {
  cursor: pointer;
  background-color: #0000;
}

.slider.bs-highlights {
  height: 560px;
  padding-bottom: 0;
}

.slider.beam-studio {
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  height: 420px;
  display: block;
}

.slider.next-project {
  height: 500px;
}

.slider.ador {
  justify-content: center;
  align-items: center;
  height: 560px;
  margin-top: 12px;
}

.slider.beam-studio-page {
  cursor: auto;
  height: 600px;
}

.slider.bs-redesign {
  height: 480px;
}

.slider.home, .slider.case-study {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.slide-2 {
  background-image: url('../images/smart-2.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slide-2.bs-hero {
  background-image: url('../images/BS-Features-Boxgen.webp');
}

.slide-2.ador {
  background-image: url('../images/Ador-2.webp');
  background-position: 50%;
  background-size: contain;
}

.slide-2.bs-redesign {
  background-image: url('../images/BS-Redesign-2.png');
  background-position: 50%;
  background-size: contain;
}

.slide-2.firmware {
  background-image: url('../images/Firmware-2.webp');
  background-position: 50%;
  background-size: contain;
}

.slide-3 {
  background-image: url('../images/smart-3.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slide-3.bs-hero {
  background-image: url('../images/BS-Features-Cloud.webp');
}

.slide-3.ador {
  background-image: url('../images/Ador-3.webp');
}

.slide-3.firmware {
  background-image: url('../images/Firmware-3.webp');
  background-position: 50%;
  background-size: contain;
}

.slide-4 {
  background-image: url('../images/Hero_elements.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slide-4.ador {
  background-image: url('../images/Ador-4.webp');
}

.slide-4.firmware {
  background-image: url('../images/Firmware-4.webp');
  background-position: 50%;
  background-size: contain;
}

.slider-wrapper {
  align-self: center;
  width: 110%;
  margin-top: -3rem;
  margin-bottom: .6rem;
}

.section-wrapper {
  color: var(--text-main);
  padding-top: 12rem;
  box-shadow: 0 0 #b0c2ff00;
}

.back-to-home {
  border: 1px solid var(--stroke);
  color: var(--text-tertiary);
  background-color: #1f1f1f;
  border-radius: 60px;
  padding: 10px 20px;
  font-size: 1rem;
  transition: all .2s;
  position: fixed;
  inset: 20px auto auto 20px;
}

.back-to-home:hover {
  transform: scale(1.05);
}

.testimonials-mask {
  padding: .6rem;
}

.slider-block-div {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.link-block-3 {
  position: static;
  inset: auto 0% 0% auto;
}

.youtube-wrapper {
  border-radius: 20px;
  width: 100%;
  overflow: hidden;
}

.ador-setup-steps {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  max-width: 1080px;
  padding: 0;
}

.ador-setup-image {
  border-radius: 12px;
  max-width: 100%;
  margin-bottom: 1.2rem;
}

.ador-setup-cell {
  justify-content: flex-start;
  align-items: flex-start;
}

.ador-setup-text {
  color: var(--text-secondary);
  padding-left: 8px;
  font-size: 1.2rem;
  line-height: 1.3;
}

.project-impact-text {
  color: var(--text-tertiary);
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.3;
}

.project-impact-text.next-step {
  color: var(--text-main);
  font-family: DM Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.project-impact-cell {
  text-align: left;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.project-impact-cell.next-step {
  grid-column-gap: .6rem;
  grid-row-gap: .6rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.project-impact-cell.last {
  border-bottom-style: none;
  padding-bottom: 0;
}

.project-impact-cell.impact {
  grid-column-gap: .6rem;
  grid-row-gap: .6rem;
  flex-flow: column;
}

.project-impact-table {
  grid-column-gap: 3rem;
  grid-row-gap: 2rem;
  align-self: center;
  width: 100%;
  padding: 1rem 0 0;
}

.icon-impact {
  opacity: .75;
  width: 32px;
  margin-top: -4px;
  margin-right: 20px;
}

.bs-user-feedback-image {
  width: 80%;
}

.bs-specs-image {
  width: 65%;
  margin-bottom: -2rem;
}

.bs-color-sheet-image {
  width: 80%;
}

.bs-select-machine-image, .image-17, .image-18 {
  border-radius: 8px;
}

.slide-nav {
  box-sizing: border-box;
  display: block;
  inset: auto 0% -8%;
}

.icon-external-link {
  opacity: .4;
  color: #0000;
  background-image: url('../images/icon-external-link.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 2px;
  padding-left: 0;
  font-size: 1.3rem;
  line-height: 1;
}

.icon-download {
  color: #0000;
  background-image: url('../images/icon-download.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 4px;
  font-size: 1.3rem;
}

.text-block {
  display: inline-block;
}

.site-title {
  background-image: linear-gradient(180deg, #a8aeb0, var(--white));
  color: var(--white);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: DM Sans, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3em;
  transition: all .2s;
}

.site-title:hover {
  text-shadow: 0 0 4px #fff3;
}

.image-19 {
  border-radius: 8px;
}

.project-image {
  border-radius: 20px;
  width: 100%;
}

.project-image.bs-select-machine-image {
  width: 92%;
}

.project-image.about-flux {
  width: 100%;
}

.project-image.side-project.last {
  margin-top: 10rem;
}

.project-image.side-project.srangsern {
  border-radius: 4px;
}

.project-image.side-project.acorn-grid {
  margin-top: 4rem;
}

.next-project-container {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  padding: 6rem 3rem 8rem;
  display: flex;
}

.text-block-2 {
  font-size: 2rem;
  line-height: 1.3;
}

.next-project-text {
  color: var(--white);
  font-family: DM Serif Text, sans-serif;
  font-size: 2.8rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

.next-project-text.heading-text-bold {
  font-style: italic;
}

.div-block-12 {
  width: 100%;
  max-width: 1280px;
  display: flex;
}

.next-project-wrapper {
  justify-content: space-between;
  align-items: center;
  display: block;
}

.about-heading {
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 0;
  margin-bottom: 2rem;
  font-family: DM Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
}

.about-wrapper {
  max-width: 800px;
}

.about-heading-italic {
  color: var(--text-main);
  font-size: 2rem;
  font-style: italic;
}

.task-image {
  object-fit: fill;
  object-position: 50% 50%;
  display: block;
}

.path-d8dlz {
  color: #111;
}

.icon-link {
  height: 1.4rem;
  margin: -8px -6px 0 0;
}

.media-annotation {
  font-size: 1rem;
}

.svg-vm4mt {
  color: #fff;
}

.icon-link-white {
  width: 18px;
  height: 18px;
  margin-top: -8px;
  margin-left: 2px;
  margin-right: -10px;
  display: inline-block;
}

.ador-mockups {
  width: 43%;
}

.elementor-image {
  width: 88%;
}

.bold-text {
  color: var(--white);
}

.bold-text.highlight {
  color: var(--highlight);
}

.icon-problem {
  width: 24px;
  height: 24px;
  color: var(--red);
  align-self: center;
  margin-top: -2px;
  margin-right: 10px;
}

.icon-insight {
  width: 24px;
  height: 24px;
  color: var(--highlight);
  margin-top: -2px;
  margin-bottom: 2px;
  margin-right: 10px;
}

.ikonik-p9k2f {
  color: #fff;
}

.project-heading-sentence {
  max-width: 800px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
}

.ador-image {
  border-radius: 20px;
  width: 90%;
}

.title-and-paragraph {
  width: 98%;
  max-width: 1568px;
}

.title-and-paragraph.acorn {
  margin-bottom: 0;
}

.title-and-paragraph.baixian {
  margin-bottom: 2rem;
}

.highlight-wrapper {
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 1.2rem;
  display: flex;
}

.icon-highlight {
  color: #fff;
  width: 32px;
  height: 32px;
  margin-top: 16px;
}

.highlight-bullet-point {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  padding: 12px;
}

.icon-nextstep {
  width: 32px;
  height: 32px;
  margin-top: -3px;
}

.icon-nextstep.other {
  opacity: .75;
  width: 32px;
  height: 32px;
  padding-left: 2px;
  padding-right: 2px;
}

.content-name-wrapper {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.challenge-heading {
  color: #ffdba1;
  margin-bottom: 0;
  font-family: DM Sans, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
}

.image-20 {
  border: 1px solid var(--stroke);
}

.image-black-bg {
  border: 1px solid var(--stroke);
  border-radius: 20px;
  width: 100%;
  overflow: hidden;
}

.image-black-bg.image-overflow {
  border: 0px none var(--transparent);
  object-fit: fill;
  object-position: 0% 50%;
  border-radius: 0;
  width: auto;
  max-width: 180%;
  overflow: visible;
}

.icon-context {
  width: 24px;
  height: 24px;
  color: var(--text-tertiary);
  margin-top: -1px;
  margin-right: 8px;
}

.ikonik-tqnej {
  color: #fff;
}

.cell-8 {
  justify-content: flex-start;
  align-items: flex-start;
}

.ikonik-6w3j9 {
  color: #fff;
}

.project-heading-name {
  color: var(--white);
  margin-top: 1rem;
  margin-bottom: .6rem;
  font-family: DM Sans, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
}

.project-heading-name.client-project {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.number-list {
  margin-top: 1rem;
  padding-left: 1rem;
  font-size: 1rem;
  line-height: 1.3;
  list-style-type: disc;
}

.list-item {
  color: var(--text-secondary);
  line-height: 1.6;
}

.icon-section {
  width: 34px;
  height: 34px;
  margin-top: -2px;
  margin-bottom: 2px;
  margin-right: 12px;
}

.icon-section.boxgen {
  width: 34px;
  height: 32px;
}

.annotation {
  color: var(--text-tertiary);
}

.div-block-13 {
  width: 1200px;
  max-width: 1200px;
}

.header-content-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1180px;
  display: block;
}

.header-content-wrapper.home {
  justify-content: center;
  align-items: center;
}

.section-header-wrapper {
  background-image: linear-gradient(90deg, var(--background), var(--stroke) 20%, #646464 50%, var(--stroke) 80%, var(--background));
  width: 100%;
  max-width: 100%;
  margin-bottom: 5rem;
  padding-top: 1px;
  padding-bottom: 1px;
}

.section-header-wrapper.problem {
  background-image: linear-gradient(90deg, var(--background), #4b2d2e 20%, #7c393b 50%, #4b2d2e 80%, var(--background));
}

.section-header-wrapper.home {
  background-image: linear-gradient(90deg, var(--background) 5%, var(--stroke) 25%, #646464 50%, var(--stroke) 75%, var(--background) 95%);
  margin-bottom: 0;
  padding-top: 2px;
  padding-bottom: 2px;
}

.icon-arrow-next {
  color: var(--transparent);
  background-image: url('../images/icon_black-arrow.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 4px;
}

.image-21 {
  width: 32px;
  height: 32px;
}

.icon-tasks {
  width: 40px;
  height: 40px;
  margin: -2px 8px 2px -4px;
}

.icon-iterate {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  margin-right: 8px;
}

.ikonik-ii6ck {
  color: #fff;
}

.icon-implement, .icon-launch {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  margin-right: 10px;
}

.div-hide {
  overflow: hidden;
}

.image-underline {
  width: 90%;
  position: relative;
  top: -2.6rem;
  left: -1.6rem;
}

.video-container {
  width: 100%;
  max-width: 100%;
}

.nav-inner-container {
  background-image: linear-gradient(135deg, #191a1a, #26292c 25%, #181a1b 75%);
  border-radius: 100px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding: 4px 8px 4px 28px;
  display: flex;
}

.nav-inner-container.page-control {
  background-image: none;
  border-radius: 0;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  padding-top: 9px;
  padding-bottom: 8px;
  padding-left: 2rem;
  display: flex;
}

.mobile-view-modal {
  display: none;
}

.icon-computer {
  color: #fff;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: center;
  flex-direction: column;
  display: flex;
}

.text-block-3 {
  color: var(--text-tertiary);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.3;
}

.heading-7 {
  font-size: 2rem;
  line-height: 1.3;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.umich-logo-text {
  color: var(--transparent);
  background-image: url('../images/u-m_logo-horizontal-hex-reversed.png');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 0;
  margin-right: 4px;
  font-size: .92rem;
  line-height: 1.3;
  display: inline-block;
}

.dropdown-subtitle {
  color: #848484;
  margin-top: 12px;
  margin-left: 4px;
  margin-right: 4px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: .8rem;
  font-weight: 300;
  line-height: .8rem;
}

.dropdown-subtitle.more-work {
  margin-top: 12px;
}

.return-home-button {
  color: var(--text-secondary);
  background-color: #191a1b;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: .86rem;
  transition: opacity .3s;
  position: absolute;
  right: 3%;
}

.return-home-button:hover {
  color: var(--white);
}

.return-home-button.w--current {
  color: var(--text-secondary);
  background-color: #191a1b;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: .9rem;
  transition: all .3s;
  position: absolute;
  right: 1.4rem;
}

.return-home-button.w--current:hover {
  color: var(--white);
}

.home-bio-title {
  background-image: linear-gradient(360deg, var(--white), #fffc 50%, var(--text-secondary));
  color: var(--white);
  text-shadow: none;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  padding-left: 2px;
  padding-right: 8px;
  font-size: 1.3rem;
  font-weight: 400;
  display: inline-block;
}

.div-block-14 {
  flex-flow: column;
  display: flex;
}

.testimonial-slider-small {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4ebf3;
  padding: 80px 30px;
  position: relative;
}

.container-5 {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.centered-heading {
  text-align: center;
  margin-bottom: 16px;
}

.centered-subheading {
  text-align: center;
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-slider {
  background-color: #0000;
}

.testimonial-slide-wrapper {
  max-width: 32%;
  margin-right: 2%;
}

.testimonial-card {
  grid-column-gap: .6rem;
  grid-row-gap: .6rem;
  border: 1px solid var(--link);
  background-image: linear-gradient(-45deg, #151a1b, #1d2a2c 45% 55%, #151a1b);
  border-radius: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.6rem 1.6rem 1.6rem 2rem;
  display: flex;
  transform: skew(1deg, .5deg);
  box-shadow: -4px 4px 6px 1px #34adb333, inset 0 0 40px #85f1ff1f;
}

.testimonial-card.purple {
  background-image: linear-gradient(-45deg, #17151b, #241d2c 45% 55%, #17151b);
  border-color: #f5b2ff;
  transform: skew(-1deg, -.5deg);
  box-shadow: 4px 4px 6px 1px #9634b333, inset 0 0 40px #ff85ef1f;
}

.testimonial-card.yellow {
  border-color: var(--highlight);
  background-image: linear-gradient(-45deg, #1b1915, #2c2a1d 45% 55%, #1b1915);
  box-shadow: -4px 4px 6px 1px #b3943433, inset 0 0 40px #ffed851f;
}

.testimonial-info {
  grid-column-gap: .4rem;
  grid-row-gap: .4rem;
  flex-flow: column;
  justify-content: flex-start;
  align-self: flex-end;
  align-items: flex-end;
  display: flex;
}

.testimonial-image {
  object-fit: cover;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin-right: 16px;
}

.testimonial-author {
  color: var(--white);
  text-align: right;
  align-self: flex-end;
  margin-top: 0;
  margin-bottom: 0;
  font-family: DM Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3em;
}

.tagline {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 16px;
}

.testimonial-icon-wrapper {
  flex: 1;
  justify-content: flex-end;
  display: flex;
}

.testimonial-slider-left {
  justify-content: center;
  align-items: flex-start;
  width: 2rem;
  height: 2rem;
  display: block;
  inset: -16% 3rem auto auto;
}

.testimonial-slider-left:focus-visible, .testimonial-slider-left[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.slider-arrow-embed {
  color: #1a1b1f;
}

.testimonial-slider-right {
  justify-content: center;
  align-items: flex-start;
  width: 2rem;
  height: 2rem;
  display: flex;
  inset: -16% 0% auto auto;
}

.testimonial-slider-right:focus-visible, .testimonial-slider-right[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.testimonial-slide-nav {
  justify-content: center;
  align-items: center;
  display: none;
}

.testimonials-wrapper {
  width: 100%;
  max-width: 1400px;
}

.ikonik-mq7ucl, .ikonik-mq7ucl-copy {
  color: #fff;
}

.icon-arrow-in-circle {
  opacity: .4;
  transition: opacity .3s;
}

.icon-arrow-in-circle:hover {
  opacity: .9;
}

.icon-arrow-in-circle.right {
  transform: rotate(180deg);
}

.icon-number-outline {
  color: #fff;
  width: 52px;
  height: 52px;
}

.icon-2, .ikonik-r8ajg, .ikonik-m6qrx {
  color: #fff;
}

.my-approach-item {
  color: #9a949b;
  font-size: .9rem;
  line-height: 1.3em;
}

.my-approach-column {
  padding-right: 20px;
}

.my-approach-subtitle {
  color: var(--text-main);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fff, #fdefff);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 16px;
  font-family: DM Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2em;
}

.ikonik-l4e6j {
  color: #fff;
}

.my-approach-number {
  margin-bottom: 12px;
  display: block;
}

.ikonik-k34sn, .ikonik-vzoyj, .ikonik-6y1zji, .ikonik-iaalw, .ikonik-l7hh3 {
  color: #fff;
}

.project-impact-subheading {
  color: var(--white);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#fff, #beffdb);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 0;
  margin-bottom: 0;
  font-family: DM Sans, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2em;
}

.highlight-text {
  color: var(--white);
  font-weight: 500;
}

.highlight-div {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.highlight-div.last {
  margin-bottom: 3rem;
}

.columns {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.persona-cell {
  justify-content: flex-start;
  align-items: flex-start;
}

.persona {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  padding: 0;
}

.ikonik-prtxq {
  color: #fff;
}

.persona-icon {
  width: 32px;
  height: 32px;
  margin-top: -2px;
}

.persona-icon.other {
  width: 32px;
  margin-right: 4px;
}

.ikonik-8melw, .ikonik-64upd {
  color: #fff;
}

.quote-text {
  color: var(--text-main);
  margin-top: -.6rem;
  font-style: italic;
  display: block;
}

.persona-image {
  border-radius: 8px;
  width: 100%;
}

.persona-container {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  border: 1px solid var(--stroke);
  background-color: var(--background);
  border-radius: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 2rem 2rem 3rem 3rem;
  display: flex;
  box-shadow: inset 0 0 40px #232527;
}

.persona-div {
  flex-flow: column;
  width: 40%;
  display: flex;
}

.persona-image-div {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 60%;
  display: flex;
}

.persona-heading {
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  font-family: DM Sans, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2em;
}

.persona-heading.problem {
  color: var(--text-tertiary);
}

.persona-icon-and-heading {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.persona-row-div {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  border-bottom: 1px solid var(--stroke);
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 1rem;
  display: flex;
}

.ikonik-dnezo {
  color: #fff;
}

.challenges-list {
  color: #ffdba1;
  margin-top: -.6rem;
  margin-bottom: 0;
  padding-left: 1.2rem;
  font-family: DM Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.challenge-item {
  margin-bottom: .6rem;
  margin-left: .6rem;
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
}

.challenge-item.last {
  margin-bottom: 0;
}

.persona-heading-other {
  color: var(--text-tertiary);
  font-weight: 300;
}

.icon-text {
  grid-column-gap: .6rem;
  grid-row-gap: .6rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.pause-state {
  transition: opacity .2s;
  display: block;
}

.pause-state:hover {
  opacity: .75;
}

.video-icon {
  opacity: .75;
  color: #19191a;
  width: 4rem;
  height: 4rem;
  transition: opacity .2s;
}

.ikonik-mhyv5i, .ikonik-imix, .ikonik-m9vxak {
  color: #19191a;
}

.play-state {
  opacity: .5;
  transition: opacity .2s;
  display: block;
}

.play-state:hover {
  opacity: .75;
}

.home-portrait-image-overlay {
  position: absolute;
}

.home-portrait-div {
  width: 65%;
  max-width: 100%;
  position: relative;
}

.ikonik-v7wgr {
  color: #fff;
}

.overflow-div {
  border: 1px solid var(--stroke);
  background-color: #161616;
  border-radius: 20px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
  overflow: auto;
}

.ikonik-e47tz {
  color: #fff;
}

.typing-word {
  color: var(--white);
  font-weight: 700;
}

.ikonik-vj88l {
  color: #fff;
}

@media screen and (max-width: 991px) {
  .home-section {
    align-items: center;
    padding-top: 7rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .home-container {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
  }

  .heading {
    margin-bottom: 10px;
    font-size: 30px;
  }

  .heading.footer {
    font-size: 1.6rem;
    line-height: 26px;
  }

  .heading.timeline {
    margin-bottom: 4rem;
    font-size: 2.4rem;
  }

  .heading.home-bio {
    text-align: center;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 1.6rem;
  }

  .heading.home-bio.title {
    margin-bottom: -2.4rem;
  }

  .heading.about {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .heading.about.bio {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.3;
  }

  .heading.process {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 2rem;
  }

  .heading.process.side-project {
    font-size: 2.4rem;
  }

  .heading.process.highlights {
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  .heading.process.impact {
    color: #dcffdd;
  }

  .heading.home {
    font-size: 2rem;
  }

  .heading.table-content, .heading.testimonials {
    font-size: .9rem;
  }

  .heading-2 {
    margin-bottom: 12px;
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .heading-2.line-2 {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .outer-container {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .heading-3 {
    margin-right: 16px;
    font-size: 20px;
    line-height: 20px;
  }

  .home-description {
    font-size: 1.2rem;
  }

  .flux-logo {
    width: 92px;
    max-width: 100%;
    margin-bottom: 8px;
    margin-left: 12px;
  }

  .purdue-logo {
    width: 120px;
    margin-bottom: 12px;
  }

  .future-text {
    font-size: 1.3rem;
  }

  .text-span-9 {
    font-size: 20px;
  }

  ._4-years-text {
    font-size: 1.1rem;
  }

  .home-intro-container {
    align-self: center;
    width: 100%;
    max-width: 100%;
    padding-top: 1rem;
  }

  .sub-container-2 {
    width: 45%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .home-portrait-image {
    margin-top: -4rem;
    bottom: -1.4rem;
  }

  .navbar {
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
  }

  .nav-button {
    font-size: 1rem;
  }

  .nav-outer-container {
    border-radius: 30px;
    flex: 0 auto;
    order: 0;
    align-self: center;
  }

  .projects-section {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-top: -2.2rem;
    margin-bottom: 4rem;
  }

  .projects-section.testimonials {
    padding-top: 4rem;
  }

  .projects-section.testimonials.about-page {
    margin-bottom: -4rem;
  }

  .project-container {
    max-width: 100%;
    margin-bottom: 0;
    padding: 2rem 4rem;
  }

  .project-container.side {
    padding-top: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .project-heading-home {
    margin-top: .6rem;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    line-height: 1.3;
  }

  .project-heading-home.page {
    font-size: 2.2rem;
    line-height: 1.3;
  }

  .project-heading-home.side-project {
    font-size: 1rem;
  }

  .project-description {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.3;
  }

  .project-description.side-project {
    font-size: 14px;
  }

  .project-description.page {
    margin-bottom: 0;
    font-size: 1rem;
  }

  .project-description.page.number {
    padding-right: 12px;
  }

  .project-description.home {
    text-align: left;
    margin-bottom: 16px;
    font-size: 1rem;
  }

  .hero-text-container {
    width: 100%;
    margin-right: auto;
    padding-left: 0;
  }

  .media-container {
    width: 100%;
    max-width: 1080px;
    margin-bottom: 6rem;
  }

  .media-container.home {
    width: 100%;
    margin-bottom: 12px;
  }

  .media-container.hero {
    width: 100%;
    max-width: 1080px;
  }

  .media-container.mrnola {
    margin-top: 0;
  }

  .media-container.highlights {
    margin-bottom: 3rem;
  }

  .media-container.hero-copy {
    width: 100%;
    max-width: 1080px;
  }

  .project-tag {
    padding: 6px 10px;
    font-size: .9rem;
  }

  .project-type {
    font-size: .9rem;
    line-height: 1.3;
  }

  .project-type.page {
    font-size: 1rem;
  }

  .project-type.side {
    font-size: .9rem;
  }

  .heading-container.section-heading {
    background-image: radial-gradient(circle farthest-side at 50% 0%, #242424, #1d1d1d 55%, var(--background));
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .heading-container.section-heading.impact {
    border-radius: 12px;
    width: 100%;
    margin-bottom: 3rem;
    padding: 1rem 2rem 2rem;
  }

  .heading-container.section-heading.highlights {
    border-radius: 12px;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .heading-container.section-heading.next-steps {
    border-radius: 12px;
    width: 100%;
    margin-bottom: 2rem;
    padding: 1rem 2rem 2rem;
  }

  .heading-container.section-heading.client-work {
    border-radius: 12px;
    padding-bottom: 2rem;
  }

  .heading-container.side-project {
    margin-bottom: 40px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .side-projects-heading {
    margin-top: 20px;
    line-height: 34px;
  }

  .cell {
    padding: 25px;
  }

  .quick-stack {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .heading-text-bold {
    border-bottom-style: solid;
  }

  .nav-bar-text {
    font-size: 1rem;
  }

  .dropdown-link {
    line-height: 1;
  }

  .footer-section {
    margin-top: 3rem;
  }

  .footer-container {
    max-width: 720px;
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .heading-5 {
    font-size: 18px;
  }

  .heading-5.footer {
    font-size: .9rem;
  }

  .link-text {
    margin-right: 24px;
    font-size: .9rem;
  }

  .link-text.last {
    margin-right: 0;
  }

  .footer-quick-stack {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .text-span-24 {
    font-size: 1.2rem;
  }

  .about-section {
    margin-top: 0;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .about-container {
    max-width: 100%;
  }

  .about-container.timeline {
    padding-top: 4rem;
  }

  .about-paragraph {
    font-size: 14px;
    line-height: 1.3;
  }

  .about-paragraph.timeline {
    font-size: 1rem;
  }

  .about-paragraph.second {
    font-size: .9rem;
  }

  .about-right-section {
    margin-left: 2rem;
  }

  .timeline-stack {
    grid-row-gap: 4rem;
    margin-bottom: 4rem;
  }

  .timeline-date {
    font-size: 1.6rem;
  }

  .timeline-picture {
    max-width: 100%;
  }

  .about-picture {
    border-radius: 12px;
    max-width: 40%;
  }

  .about-left-section {
    justify-content: center;
    align-self: center;
    align-items: flex-start;
    margin-right: 2rem;
    padding-right: 0;
  }

  .project-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .project-section.top-2 {
    margin-top: 0;
  }

  .project-overview {
    max-width: 100%;
  }

  .project-overview.top {
    padding-top: 10rem;
  }

  .project-overview.top.about {
    padding-top: 8rem;
    padding-bottom: 6rem;
  }

  .description-icon-and-title {
    margin-top: 8px;
    margin-bottom: 4px;
  }

  .description-icon-and-title.process {
    margin-top: 0;
    margin-bottom: 0;
  }

  .description-icon {
    width: 36px;
    max-width: 100%;
  }

  .project-info-cell {
    padding-right: 20px;
  }

  .paragraph {
    margin-top: .6rem;
    margin-bottom: 0;
    font-size: .9rem;
  }

  .paragraph.image {
    padding-left: 40px;
    padding-right: 40px;
  }

  .paragraph.subtitle {
    margin-top: 12px;
    padding-left: 2%;
    padding-right: 0%;
    font-size: 1rem;
  }

  .paragraph.title {
    margin-top: 1rem;
    font-size: 1.2rem;
  }

  .paragraph.title.persona {
    margin-top: .6rem;
    font-size: 1.4rem;
  }

  .paragraph.heading {
    margin-top: 16px;
    padding-left: 0;
    padding-right: 0;
    font-size: 1rem;
  }

  .paragraph.heading.highlights {
    margin-bottom: 2rem;
  }

  .paragraph.heading.end-credits {
    text-align: center;
  }

  .paragraph.highlights {
    font-size: 1rem;
    line-height: 1.3;
  }

  .paragraph.highlights.slider-text {
    margin-top: 1.6rem;
  }

  .paragraph.highlights.about {
    margin-left: 1rem;
  }

  .paragraph.problem-points {
    font-size: .9rem;
  }

  .paragraph.next-project {
    font-size: 1.4rem;
  }

  .paragraph-2 {
    font-size: 18px;
  }

  .button-main {
    padding: 8px 16px;
  }

  .button-main.resume {
    padding: 12px 18px;
    font-size: 16px;
  }

  .button-main.copy {
    font-size: .9rem;
  }

  .button-main.next-project {
    font-size: 1.1rem;
  }

  .button-main.srangsern {
    margin-top: 0;
    margin-bottom: 0;
  }

  .button-container.with-text.highlight-last {
    margin-top: 2rem;
  }

  .button-container.with-text.bs-web {
    margin-bottom: 0;
  }

  .button-container.with-text.next-project {
    border-radius: 20px;
    flex-flow: column;
  }

  .button-container.with-text.about {
    margin-bottom: 0;
    padding-left: 8px;
  }

  .background-video {
    width: 66vw;
    height: 40vw;
  }

  .background-video.beam-studio {
    width: 66px;
    height: 40px;
  }

  .video-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding-left: 0;
    padding-right: 0;
  }

  .user-feedback-table.quotes {
    margin-top: 0;
    margin-bottom: 3rem;
  }

  .user-feedback-text {
    margin-bottom: 4px;
    font-size: 1rem;
  }

  .user-feedback-text.results {
    font-size: 1rem;
  }

  .user-feedback-text.results.center {
    max-width: 80%;
    font-size: 1.1rem;
  }

  .user-feedback-cell {
    justify-content: center;
    align-items: flex-start;
  }

  .icon-arrow {
    height: 36px;
  }

  .image-description {
    font-size: 1rem;
  }

  .image-description.side-project {
    margin-top: 20px;
    padding-left: 4%;
    padding-right: 4%;
    font-size: 1rem;
    line-height: 1.3;
  }

  .image-description.challenge {
    font-size: 1rem;
  }

  .task-bullet-point {
    margin-bottom: 0;
  }

  .my-approach-block {
    grid-column-gap: 1.4rem;
    grid-row-gap: 1.4rem;
    justify-content: center;
    align-items: flex-start;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .task-image-wrapper {
    max-width: 100%;
  }

  .small-container {
    border-radius: 12px;
    flex-flow: column;
    width: 100%;
    max-width: 100%;
    padding-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .small-container.challenge {
    border-radius: 12px;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .subtitle-heading {
    margin-right: 4px;
    font-size: 1.3rem;
    display: inline;
  }

  .arrow {
    height: 36px;
  }

  .arrow-button {
    margin-bottom: 20px;
    margin-right: 28px;
    inset: auto 0% 0% auto;
  }

  .arrow-button.side-project-button {
    margin-bottom: 16px;
    margin-right: 20px;
  }

  .project-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    object-fit: fill;
    flex: 0 auto;
    order: 0;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-self: auto;
    margin-top: 1.6rem;
    display: block;
    position: relative;
  }

  .project-wrapper.next-project {
    width: 90%;
  }

  .side-project-image.baixian {
    height: 220px;
  }

  .side-project-image.acorn, .side-project-image.qts {
    width: 95%;
  }

  .side-projects-row {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-top: 2rem;
  }

  .side-projects-description {
    line-height: 1.3;
  }

  .side-project-info {
    font-size: 16px;
  }

  .footer-info {
    margin-top: 24px;
    font-size: .9rem;
  }

  .mrnola-image.left {
    width: 80%;
    margin-right: 20px;
  }

  .mrnola-image.right {
    width: 80%;
    margin-left: 20px;
  }

  .mrnola {
    width: 100%;
  }

  .overhanglab {
    max-width: 100%;
    margin-top: 0;
  }

  .side-project-heading {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.8rem;
  }

  .side-project-heading.youv-art {
    margin-top: 20px;
  }

  .polygon-video {
    width: 320px;
    height: 282px;
  }

  .pause-image {
    height: 36px;
  }

  .media-container-copy {
    width: 100%;
    max-width: 1080px;
  }

  .media-container-copy.home {
    width: 140%;
  }

  .media-container-copy.hero {
    width: 100%;
    max-width: 1080px;
  }

  .elements-video {
    width: 320px;
    height: 320px;
  }

  .text-video {
    width: 320px;
    height: 362px;
  }

  .image-wrapper {
    margin-bottom: 20px;
  }

  .layers-image {
    width: 320px;
  }

  .home-description-text {
    text-align: center;
    margin-bottom: .8rem;
  }

  .flux-logo-text {
    font-size: .8rem;
  }

  .purdue-logo-text {
    margin-right: 4px;
    font-size: 1rem;
  }

  .acorn-sketches {
    width: 80%;
    margin-bottom: -20px;
  }

  .acorn-guide {
    border-top-left-radius: 12px;
  }

  .acorn-guide.right {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .acorn-images-wrapper {
    border-radius: 12px;
    max-width: 100%;
  }

  .side-bar-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 16px 20px;
  }

  .side-bar-link {
    font-size: .9rem;
    line-height: 1.3;
  }

  .side-bar-link.w--current {
    border-radius: 16px;
    font-size: .9rem;
  }

  .side-bar-container {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    display: none;
  }

  .container-4 {
    display: flex;
  }

  .beam-studio-webpage {
    margin-bottom: 0;
  }

  .tech-text {
    font-size: 1rem;
  }

  ._16-to-9-video {
    border-radius: 12px;
  }

  .overview-wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .overview-subtitle {
    font-size: 1.4rem;
  }

  .overview {
    max-width: 54%;
  }

  .side-project-hero {
    max-width: 90%;
  }

  .side-project-hero.srangsern {
    margin-top: -2rem;
    margin-bottom: -2rem;
  }

  .project-tag-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .bs-select-machine {
    margin-bottom: 12px;
  }

  .slider {
    height: 390px;
  }

  .slider.bs-highlights {
    height: 320px;
  }

  .slider.beam-studio {
    height: 360px;
  }

  .slider.next-project {
    width: 100%;
    height: 240px;
  }

  .slider.ador {
    height: 360px;
  }

  .slider.beam-studio-page {
    height: 440px;
  }

  .slider-wrapper {
    margin-top: -4.6rem;
    margin-bottom: .6rem;
  }

  .section-wrapper {
    padding-top: 10rem;
  }

  .back-to-home {
    padding: 8px 16px;
    font-size: .9rem;
    left: 12px;
  }

  .youtube-wrapper {
    border-radius: 12px;
    width: 100%;
  }

  .project-impact-text {
    font-size: .9rem;
  }

  .project-impact-text.next-step {
    font-size: 1rem;
  }

  .project-impact-table {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .bs-user-feedback-image {
    width: 110%;
    max-width: 110%;
  }

  .icon-download {
    font-size: 1.2rem;
  }

  .project-image {
    border-radius: 12px;
  }

  .project-image.about-flux, .project-image.side-project {
    width: 100%;
  }

  .next-project-text, .about-heading-italic {
    font-size: 1.8rem;
  }

  .icon-link-white {
    width: 20px;
    height: 20px;
    margin-top: -4px;
    margin-bottom: 0;
    margin-left: 2px;
    display: inline-block;
  }

  .project-heading-sentence {
    font-size: 1rem;
  }

  .icon-highlight {
    width: 28px;
    margin-top: 4px;
  }

  .highlight-bullet-point {
    padding: 20px 0 0 8px;
  }

  .image-black-bg {
    border-radius: 12px;
    width: 100%;
  }

  .image-black-bg.image-overflow {
    max-width: 220%;
  }

  .project-heading-name {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 1.8rem;
  }

  .project-heading-name.client-project {
    margin-bottom: .4rem;
    font-size: 1.6rem;
  }

  .list-item {
    font-size: .9rem;
  }

  .header-content-wrapper.home {
    width: 680px;
  }

  .section-header-wrapper {
    max-width: 100%;
    margin-bottom: 4rem;
  }

  .section-header-wrapper.home {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .greetings-wrapper {
    justify-content: flex-start;
    align-items: center;
  }

  .image-underline {
    max-width: 80%;
    display: none;
    top: -1.4rem;
    left: -2rem;
  }

  .video-container {
    width: 100%;
    max-width: 100%;
  }

  .nav-inner-container {
    justify-content: space-between;
    max-width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .umich-logo-text {
    font-size: .8rem;
  }

  .home-bio-title {
    padding-left: 0;
    padding-right: 0;
    font-size: 1.2rem;
  }

  .container-5 {
    max-width: 728px;
  }

  .testimonial-slide-wrapper {
    max-width: 48%;
    margin-right: 4%;
  }

  .testimonial-card {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    padding-left: 1.6rem;
  }

  .testimonial-slider-left {
    right: 2.6rem;
  }

  .my-approach-column {
    padding-bottom: 20px;
    padding-right: 0;
  }

  .my-approach-column.last {
    padding-bottom: 0;
  }

  .my-approach-subtitle {
    margin-bottom: 12px;
  }

  .project-impact-subheading {
    background-image: linear-gradient(90deg, #e6ffe9, #beffcb);
    font-size: 1.2rem;
  }

  .persona {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .persona-container {
    border-radius: 12px;
    padding-left: 2rem;
  }

  .persona-div, .persona-image-div {
    width: 100%;
  }

  .persona-heading {
    font-size: 1rem;
  }

  .persona-row-div {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
    padding-bottom: 2rem;
  }

  .challenges-list {
    margin-top: 0;
  }

  .challenge-item {
    font-size: 1rem;
  }

  .persona-heading-other {
    font-size: .9rem;
  }

  .video-icon {
    width: 4rem;
    height: 4rem;
  }

  .home-portrait-div {
    width: 80%;
  }

  .overflow-div {
    border-radius: 12px;
  }
}

@media screen and (max-width: 767px) {
  img {
    border-radius: 0;
  }

  .home-section {
    margin-bottom: 0;
    padding-top: 6rem;
    padding-bottom: 0;
  }

  .home-container {
    flex-flow: column;
    width: 100%;
  }

  .heading {
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 24px;
    line-height: 24px;
  }

  .heading.footer {
    font-size: 1.6rem;
  }

  .heading.timeline {
    font-size: 2.2rem;
  }

  .heading.home-bio {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 2.2rem;
  }

  .heading.home-bio.title {
    margin-bottom: -2rem;
  }

  .heading.about {
    text-align: center;
    align-self: center;
  }

  .heading.about.bio {
    font-size: 18px;
  }

  .heading.timeline-subtitle {
    line-height: 1.3em;
  }

  .heading.process {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .heading.process.side-project {
    font-size: 2rem;
  }

  .heading.home {
    margin-top: 0;
    font-size: 2rem;
    line-height: 1.3;
  }

  .heading.table-content {
    margin-top: 0;
  }

  .heading.testimonials {
    line-height: 1.3;
  }

  .heading-2 {
    font-size: 1rem;
    line-height: 20px;
  }

  .heading-2.line-2 {
    font-size: 1rem;
  }

  .outer-container {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .heading-3 {
    margin-right: 1.6vw;
    font-size: 2.4vw;
  }

  .home-description {
    font-size: 1rem;
  }

  .flux-logo {
    width: 80px;
    margin-bottom: 4px;
    margin-left: 10px;
  }

  .purdue-logo {
    width: 108px;
    margin-bottom: 12px;
    margin-right: 8px;
  }

  .future-text {
    font-size: 16px;
  }

  .text-span-9 {
    font-size: 18px;
  }

  .home-intro-container {
    width: 100%;
    padding-top: 0;
    padding-bottom: .6rem;
  }

  .sub-container-2 {
    width: 45%;
    margin-bottom: 0;
    margin-left: 0;
    padding-bottom: 12px;
    padding-left: 0;
  }

  .home-portrait-image {
    margin-top: -3rem;
    margin-left: 0;
    bottom: 0;
  }

  .nav-button {
    display: none;
  }

  .projects-section {
    margin-top: -3.3rem;
    padding-left: 20px;
    padding-right: 20px;
  }

  .projects-section.testimonials {
    margin-bottom: 0;
  }

  .projects-section.testimonials.about-page {
    margin-bottom: -5rem;
  }

  .project-container {
    border-radius: 12px;
    margin-bottom: 0;
    padding: 1rem 3rem 2rem;
  }

  .project-container.side {
    padding-bottom: 1.6rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .project-container.next-project {
    padding-left: 20px;
    padding-right: 20px;
  }

  .project-heading-home {
    margin-top: .6rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.3;
  }

  .project-heading-home.page {
    margin-top: 0;
    line-height: 1.3;
  }

  .project-heading-home.side-project {
    font-size: .9rem;
    line-height: 1.3;
  }

  .project-description {
    margin-bottom: 8px;
    line-height: 16px;
  }

  .project-description.side-project {
    font-size: 12px;
  }

  .project-description.page {
    font-size: .9rem;
    line-height: 1.3;
  }

  .project-description.home {
    margin-bottom: 12px;
    font-size: .9rem;
    line-height: 1.2;
  }

  .media-container {
    margin-bottom: 4rem;
  }

  .media-container.home {
    margin-bottom: 20px;
  }

  .media-container.side-project {
    margin-bottom: .6rem;
  }

  .project-tag {
    padding: 4px 8px;
    font-size: .9rem;
  }

  .project-type {
    margin-top: 12px;
    font-size: .9rem;
  }

  .heading-container {
    margin-top: 10px;
  }

  .heading-container.home {
    border-radius: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .heading-container.home.first {
    margin-top: -20px;
  }

  .heading-container.section-heading {
    border-radius: 12px;
    padding: 1rem 1rem 2rem;
  }

  .heading-container.section-heading.impact {
    padding-top: .4rem;
  }

  .heading-container.section-heading.highlights {
    margin-bottom: 4rem;
    padding-bottom: 0;
  }

  .heading-container.section-heading.client-work {
    border-radius: 4px;
  }

  .heading-container.side-project {
    margin-bottom: 20px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .side-projects-heading {
    font-size: 18px;
    line-height: 24px;
  }

  .cell {
    padding: 20px;
  }

  .quick-stack {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .project-heading-italic.of-text {
    font-size: 1.6rem;
  }

  .nav-bar-text {
    font-size: .9rem;
  }

  .dropdown-toggle {
    padding-top: 12px;
    padding-bottom: 12px;
    display: block;
  }

  .dropdown-link {
    font-size: .9rem;
    display: block;
  }

  .dropdown-link.external {
    padding-top: 10px;
    padding-bottom: 14px;
  }

  .dropdown-list.w--open {
    background-color: #191b1d;
    border-radius: 24px;
    margin-top: -4px;
    left: -14%;
    right: -10%;
  }

  .dropdown-list.projects.w--open {
    left: -212%;
    right: auto;
  }

  .dropdown.about {
    display: block;
  }

  .footer-container {
    padding-top: 2.4rem;
    padding-bottom: 3rem;
    display: flex;
  }

  .heading-5 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
  }

  .heading-5.footer {
    margin-top: 0;
  }

  .link-text.last {
    margin-right: 0;
  }

  .link-block {
    margin-top: 0;
  }

  .footer-quick-stack {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .text-span-24 {
    font-size: 1rem;
  }

  .footer-cell {
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 3rem;
  }

  .about-section {
    padding-top: 0;
  }

  .about-container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 100%;
    display: flex;
  }

  .about-container.timeline {
    margin-top: 0;
    padding-top: 2rem;
  }

  .about-paragraph.timeline {
    font-size: .9rem;
  }

  .about-paragraph.second {
    font-size: 1rem;
  }

  .about-right-section {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 2rem;
    margin-left: 0;
    margin-right: 0;
    display: flex;
  }

  .timeline-stack {
    grid-row-gap: 4rem;
    margin-bottom: 0;
  }

  .timeline-date {
    font-size: 1.1rem;
  }

  .about-picture {
    max-width: 60%;
    margin-bottom: 0;
    display: inline-block;
  }

  .about-picture.left {
    border-radius: 12px;
  }

  .about-picture.right {
    border-radius: 12px;
    max-width: 60%;
  }

  .footer-cell-2 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: flex-start;
    align-items: center;
  }

  .about-left-section {
    flex-direction: column;
    order: 1;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2rem;
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
    display: flex;
  }

  .image-13 {
    margin-bottom: 20px;
  }

  .project-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .project-overview.top {
    padding-top: 8rem;
  }

  .project-overview.top.about {
    padding-left: 0;
    padding-right: 0;
  }

  .description-title {
    font-size: 1.6rem;
  }

  .description-icon-and-title {
    margin-bottom: 4px;
  }

  .description-icon-and-title.process {
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 12px;
  }

  .description-icon {
    margin-left: -4px;
  }

  .project-info-grid {
    grid-column-gap: 20px;
    margin-top: 20px;
  }

  .paragraph.image {
    padding-left: 0;
    padding-right: 0;
  }

  .paragraph.subtitle {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 1rem;
    line-height: 1.3;
  }

  .paragraph.title {
    line-height: 1.3;
  }

  .paragraph.title.persona {
    margin-top: .4rem;
  }

  .paragraph.heading {
    padding-left: 0;
    padding-right: 0;
    font-size: 1rem;
    line-height: 1.3;
  }

  .paragraph.highlights {
    font-size: 1rem;
  }

  .paragraph.highlights.ador {
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .paragraph.highlights.about {
    margin-left: 1rem;
  }

  .paragraph.highlights.button-text {
    padding-left: 20px;
    padding-right: 20px;
  }

  .paragraph.next-project {
    text-align: center;
    margin-left: 2rem;
    margin-right: 2rem;
    font-size: 1.3rem;
    line-height: 1.3em;
  }

  .paragraph.nav-project-title {
    display: none;
  }

  .paragraph-2 {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.3;
  }

  .button-main {
    text-align: center;
    width: 100%;
    margin-top: 0;
    padding: 6px 16px 8px;
    font-size: 1rem;
  }

  .button-main.copy {
    margin-top: 0;
    padding: 6px 10px;
  }

  .button-main.next-project {
    padding: 10px 12px 10px 20px;
    font-size: 1.1rem;
  }

  .button-main.ador {
    width: 100%;
  }

  .button-container {
    padding-top: 0;
  }

  .button-container.with-text {
    flex-flow: column;
    justify-content: space-between;
    width: 100%;
    padding-top: 16px;
    padding-left: 8px;
  }

  .button-container.with-text.highlight-last {
    border-radius: 28px;
    flex-flow: column;
    padding-top: 16px;
    padding-left: 8px;
  }

  .button-container.with-text.bs-web {
    justify-content: space-between;
  }

  .button-container.with-text.next-project {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 12px;
  }

  .button-container.with-text.about {
    width: 320px;
  }

  .background-video {
    height: 42vw;
  }

  .video-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-bottom: 20px;
  }

  .user-feedback-table {
    grid-column-gap: 0px;
    margin-top: 20px;
    margin-bottom: 80px;
  }

  .user-feedback-table.quotes {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    margin-bottom: 40px;
  }

  .user-feedback-text {
    margin-bottom: 12px;
    line-height: 18px;
  }

  .user-feedback-text.results {
    line-height: 20px;
  }

  .user-feedback-text.results.center {
    max-width: 100%;
    margin-top: 0;
  }

  .user-feedback-cell.quotes {
    justify-content: center;
    align-items: flex-start;
    padding: 20px 16px 12px;
  }

  .user-feedback-cell.last {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .icon-arrow {
    height: 32px;
    margin-left: -20px;
    padding-right: 4px;
  }

  .icon-arrow.down {
    height: 32px;
    margin-left: -12px;
    margin-right: 4px;
    padding-left: 0;
  }

  .icon-arrow.problem-to-solution {
    height: 28px;
    margin-left: 0;
  }

  .image-description {
    padding-left: 0%;
    padding-right: 0%;
    line-height: 1.3;
  }

  .image-description.side-project {
    font-size: .9rem;
  }

  .task-bullet-point {
    margin-bottom: 8px;
  }

  .my-approach-block {
    grid-column-gap: .6rem;
    grid-row-gap: .6rem;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 100%;
    max-height: 50%;
  }

  .task-image-wrapper {
    object-fit: fill;
    max-width: 100%;
    display: block;
  }

  .small-container {
    border-radius: 12px;
    flex-flow: column;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .small-container.challenge {
    padding-top: 1rem;
    padding-bottom: 1.4rem;
  }

  .process-image {
    object-fit: fill;
    border-radius: 4px;
  }

  .project-tab-div {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .subtitle-heading {
    margin-right: 4px;
    font-size: 1.3rem;
    display: inline;
  }

  .arrow {
    height: 32px;
  }

  .project-wrapper {
    border-radius: 13px;
    padding: 1px;
  }

  .project-wrapper.next-project, .side-project-image.acorn, .side-project-image.qts {
    width: 100%;
  }

  .side-projects-row {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    margin-top: 2rem;
  }

  .side-projects-row.last {
    margin-top: 1rem;
    margin-bottom: 0;
  }

  .side-projects-description {
    text-align: center;
    margin-top: 4px;
    font-size: 16px;
  }

  .side-projects-page {
    padding-top: 8rem;
  }

  .side-project-info {
    margin-top: 12px;
    font-size: .9rem;
  }

  .srangsern {
    max-width: 96%;
    margin-top: 0;
  }

  .email-field {
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
  }

  .footer-info {
    margin-top: 2rem;
    font-size: .9rem;
    line-height: 1.3;
  }

  .mrnola-image.left, .mrnola-image.right {
    width: 100%;
  }

  .side-project-heading {
    text-align: center;
    font-size: 1.6rem;
  }

  .polygon-video {
    width: 266px;
    height: 220px;
  }

  .play-button {
    margin-bottom: .6rem;
    margin-right: 1rem;
  }

  .play-image {
    height: 3rem;
  }

  .media-container-copy {
    margin-bottom: 40px;
  }

  .elements-video {
    width: 266px;
    height: 252px;
  }

  .text-video {
    width: 266px;
    height: 280px;
  }

  .image-wrapper {
    justify-content: center;
    align-items: center;
  }

  .layers-image {
    object-fit: fill;
    width: 320px;
    max-width: 48%;
  }

  .home-description-text {
    text-align: center;
    margin-bottom: 12px;
    font-size: .9rem;
    line-height: 1.2;
  }

  .acorn-sketches {
    width: 90%;
    max-width: 100%;
  }

  .acorn-images-wrapper {
    max-width: 100%;
  }

  .side-bar-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .side-bar-container {
    display: none;
  }

  .beam-studio-webpage, .bs-library-image, .bs-library-image.old {
    border-radius: 4px;
  }

  .overview-subtitle {
    font-size: 1.2rem;
  }

  .side-project-hero {
    margin-top: 0;
  }

  .slider {
    height: 320px;
  }

  .slider.bs-highlights {
    height: 240px;
  }

  .slider.beam-studio {
    height: 280px;
  }

  .slider.next-project {
    height: 200px;
  }

  .slider.ador {
    height: 280px;
  }

  .slider.beam-studio-page {
    height: 320px;
  }

  .slider.bs-redesign {
    height: 280px;
  }

  .slider-wrapper {
    margin-top: -3rem;
  }

  .section-wrapper {
    padding-top: 6rem;
  }

  .project-impact-text {
    font-size: .9rem;
  }

  .project-impact-cell.next-step, .project-impact-cell.last, .project-impact-cell.impact {
    padding-left: 0;
    padding-right: 0;
  }

  .project-impact-table {
    margin-top: .4rem;
  }

  .bs-user-feedback-image, .bs-specs-image, .bs-color-sheet-image {
    margin-bottom: 8px;
  }

  .slide-nav {
    bottom: -14%;
  }

  .site-title {
    font-size: 1.8rem;
  }

  .project-image.side-project.last {
    margin-top: 4rem;
  }

  .project-image.side-project.acorn-grid {
    margin-top: 2rem;
  }

  .next-project-container {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }

  .about-heading-italic {
    font-size: 1.4rem;
  }

  .icon-link-white {
    margin-left: 4px;
  }

  .project-heading-sentence {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .icon-highlight {
    margin-top: 0;
  }

  .highlight-bullet-point {
    padding-left: 4px;
  }

  .challenge-heading {
    margin-top: 1rem;
    font-size: 1.4rem;
  }

  .icon-context {
    width: 24px;
    margin-right: 6px;
  }

  .project-heading-name {
    font-size: 1.6rem;
  }

  .project-heading-name.client-project {
    margin-top: 0;
    font-size: 1.4rem;
  }

  .number-list {
    padding-left: 1.2rem;
  }

  .list-item {
    padding-bottom: 1rem;
    line-height: 1.3;
  }

  .icon-tasks {
    width: 36px;
    height: 36px;
  }

  .nav-inner-container {
    padding: 0 4px 0 1rem;
  }

  .nav-inner-container.page-control {
    display: none;
  }

  .nav-inner-container.page-control.reducing-workflow-friction-for-40k-laser-cutter-users {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .mobile-view-modal {
    z-index: 9999;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: #111111bf;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .mobile-modal-text {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .mobile-modal-text.center {
    margin-bottom: 1rem;
    font-weight: 600;
  }

  .heading-7 {
    font-size: 1.6rem;
  }

  .dropdown-subtitle {
    font-size: .75rem;
  }

  .return-home-button.w--current {
    display: none;
  }

  .home-bio-title {
    font-size: 1.1rem;
  }

  .testimonial-slider-small {
    padding: 60px 15px;
  }

  .testimonial-slide-wrapper {
    max-width: 100%;
  }

  .testimonial-card {
    justify-content: flex-start;
    height: auto;
    padding: 1.2rem 1rem 1.2rem 1.2rem;
    transform: none;
  }

  .testimonial-card.purple {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    transform: none;
  }

  .testimonial-info {
    margin-top: 1rem;
  }

  .testimonial-author {
    font-size: 1rem;
  }

  .testimonial-slider-left {
    inset: -16% auto auto 2%;
  }

  .testimonial-slider-right {
    right: 2%;
  }

  .my-approach-item {
    font-size: .9rem;
  }

  .my-approach-column {
    padding-left: 0;
  }

  .my-approach-subtitle {
    margin-bottom: 8px;
  }

  .persona {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .home-portrait-div {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .home-section {
    padding-top: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .home-container {
    min-width: auto;
    max-width: 380px;
    display: block;
  }

  .heading {
    justify-content: flex-start;
    margin-bottom: 0;
    font-size: 24px;
    line-height: 32px;
  }

  .heading.footer {
    text-align: center;
    justify-content: center;
    margin-bottom: .6rem;
    font-size: 1.5rem;
    line-height: 32px;
  }

  .heading.timeline {
    margin-bottom: 3rem;
    font-size: 1.6rem;
  }

  .heading.home-bio {
    text-align: center;
    margin-left: 0;
    font-size: 2rem;
  }

  .heading.about.bio {
    font-size: 1rem;
  }

  .heading.timeline-subtitle {
    font-size: .8rem;
  }

  .heading.process {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .heading.process.side-project, .heading.process.impact {
    font-size: 1.6rem;
  }

  .heading.home {
    margin-bottom: 0;
    font-size: 1.8rem;
  }

  .heading.home.testimonial {
    margin-bottom: 1rem;
    font-size: 1.6rem;
  }

  .heading.table-content {
    margin-top: 0;
    font-size: .8rem;
    line-height: 1.3;
  }

  .heading.testimonials {
    font-size: .9rem;
  }

  .heading-2 {
    line-height: 20px;
    display: inline-block;
  }

  .heading-3 {
    margin-right: 4px;
    font-size: 4vw;
    line-height: 4vw;
  }

  .line-4 {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .line-1 {
    text-align: center;
  }

  .flux-logo {
    width: 68px;
  }

  .purdue-logo {
    width: 100px;
  }

  .future-text {
    display: inline;
  }

  ._4-years-text {
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .home-intro-container {
    text-align: left;
    width: auto;
    min-width: auto;
    max-width: 100%;
    margin-top: 2rem;
    margin-right: 0;
    padding-bottom: 1rem;
  }

  .sub-container-2 {
    justify-content: center;
    width: auto;
    max-width: 100%;
    padding-bottom: 0;
  }

  .home-portrait-image {
    margin-top: -1rem;
    bottom: 1rem;
  }

  .navbar {
    flex-direction: column;
    justify-content: flex-start;
    max-width: 100%;
    display: flex;
  }

  .nav-about {
    justify-content: center;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    display: flex;
  }

  .infinite-scroll-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .nav-outer-container {
    flex-direction: row;
    order: 0;
    justify-content: center;
    align-self: center;
    align-items: center;
    width: 94vw;
    max-width: 100%;
    margin-top: 12px;
    padding-right: 1px;
    display: flex;
  }

  .projects-section {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-top: -3.9rem;
    padding-left: 20px;
    padding-right: 20px;
  }

  .projects-section.testimonials {
    padding-top: 4rem;
  }

  .projects-section.testimonials.about-page {
    margin-bottom: -3rem;
  }

  .project-container {
    border-radius: 12px;
    justify-content: flex-start;
    align-self: center;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 0;
    padding: 1rem 1.4rem 1.4rem;
    display: flex;
    box-shadow: inset 0 0 20px 8px #ffffff14;
  }

  .project-container:hover {
    box-shadow: inset 0 0 60px 8px #ffffff29;
  }

  .project-container.side {
    box-shadow: inset 0 0 20px 8px #ffffff14;
  }

  .project-heading-home {
    text-align: left;
    margin-top: 8px;
    line-height: 1.3em;
  }

  .project-heading-home.page {
    align-items: flex-start;
    font-size: 1.8rem;
  }

  .project-heading-home.side-project {
    line-height: 1.4em;
  }

  .project-description {
    text-align: left;
    font-size: .9rem;
    line-height: 1.3;
  }

  .project-description.page {
    text-align: left;
    font-size: .9rem;
  }

  .project-description.home {
    text-align: left;
  }

  .hero-text-container {
    text-align: left;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    margin-top: 0;
    padding-left: 0;
    display: block;
  }

  .media-container {
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin-bottom: 4rem;
    display: flex;
  }

  .media-container.home {
    margin-bottom: 8px;
  }

  .media-container.side-project {
    width: 100%;
    max-width: 312px;
    margin-top: 0;
  }

  .media-container.highlights {
    margin-bottom: 2rem;
  }

  .project-tag {
    border-radius: 6px;
    margin-top: 0;
    margin-right: 0;
    font-size: .8rem;
  }

  .project-type {
    text-align: left;
    font-size: .8rem;
    line-height: 18px;
  }

  .project-type.page {
    text-align: left;
    margin-top: 12px;
    font-size: .8rem;
  }

  .heading-container {
    max-width: 296px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .heading-container.home {
    border-radius: 12px;
    max-width: 380px;
    padding-top: .8rem;
    padding-bottom: .8rem;
  }

  .heading-container.section-heading {
    background-image: linear-gradient(90deg, var(--background), #242424 40%, #1d1d1d 75%, var(--background));
    border-radius: 8px;
    max-width: 100%;
    padding-bottom: 1.6rem;
    padding-left: .6rem;
    padding-right: .6rem;
  }

  .heading-container.section-heading.the-problem {
    padding-left: 0;
    padding-right: 0;
  }

  .heading-container.section-heading.impact {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .heading-container.section-heading.highlights {
    margin-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .heading-container.section-heading.next-steps {
    margin-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .heading-container.section-heading.client-work {
    padding-bottom: 1.2rem;
  }

  .heading-container.side-project {
    border-radius: 12px;
    padding: 20px 16px 12px;
  }

  .side-projects-container {
    max-width: 296px;
  }

  .cell {
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 12px;
  }

  .quick-stack {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .project-heading-italic.of-text {
    font-size: 1.4rem;
  }

  .icon {
    flex: 0 auto;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 12px;
    padding-left: 4px;
    display: block;
  }

  .dropdown-toggle {
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 12px 28px 12px 16px;
    display: flex;
  }

  .dropdown-link {
    border-radius: 20px;
    padding: 12px;
  }

  .dropdown-link.top {
    margin-top: 4px;
    line-height: 1.3em;
  }

  .dropdown-list.w--open {
    width: auto;
    font-size: 12px;
    display: block;
    position: absolute;
    inset: auto -6% auto -14%;
  }

  .dropdown-list.projects.w--open {
    width: 90vw;
    position: absolute;
    left: auto;
    right: -126%;
  }

  .dropdown {
    flex-direction: row;
    display: block;
  }

  .brand {
    order: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
  }

  .brand.w--current {
    width: 100%;
  }

  .project-hero-image-home {
    margin-bottom: 8px;
    display: block;
  }

  .footer-container {
    max-width: 100%;
    padding-bottom: 4rem;
  }

  .heading-5 {
    text-align: center;
    font-size: 14px;
  }

  .heading-5.footer {
    font-size: .9rem;
  }

  .link-text {
    margin-right: 0;
    font-size: .9rem;
    line-height: 2.4;
  }

  .link-block {
    justify-content: flex-start;
    margin-bottom: 0;
    line-height: 20px;
    display: flex;
  }

  .link-icon {
    max-width: 100%;
  }

  .div-block-2 {
    display: block;
  }

  .footer-quick-stack {
    width: auto;
    max-width: 100%;
  }

  .footer-cell {
    flex-direction: column;
    padding-bottom: 3rem;
    display: block;
  }

  .about-section {
    padding-top: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .about-container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 380px;
    margin-bottom: 5rem;
    display: flex;
  }

  .about-container.timeline {
    margin-top: 0;
  }

  .about-paragraph {
    margin-bottom: 0;
    font-size: .9rem;
  }

  .about-paragraph.timeline {
    font-size: .85rem;
  }

  .about-paragraph.second {
    margin-bottom: 0;
    line-height: 1.3;
  }

  .about-right-section {
    margin-top: 1.6rem;
    margin-left: 0;
    transform: none;
  }

  .timeline-stack {
    grid-row-gap: 3rem;
    margin-bottom: -4rem;
  }

  .timeline-date {
    margin-right: 0;
    padding-right: 12px;
    font-size: 1rem;
  }

  .timeline-cell {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .timeline-picture {
    border-radius: 4px;
    width: 100%;
    margin-bottom: .6rem;
  }

  .image-10, .image-11 {
    margin-bottom: 8px;
  }

  .nav-menu {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: #0000;
    border-radius: 8px;
    flex-direction: row;
    flex: 0 auto;
    order: 0;
    justify-content: flex-start;
    align-self: auto;
    align-items: center;
    margin-left: 0;
    display: flex;
  }

  .about-picture {
    text-align: left;
    width: 80%;
    max-width: 100%;
    margin-right: 0;
    display: block;
  }

  .about-picture.left {
    border-radius: 8px;
    max-width: 80%;
    margin-right: 0;
  }

  .about-picture.right {
    border-radius: 8px;
    max-width: 80%;
    margin-left: 0;
  }

  .footer-cell-2 {
    align-items: center;
  }

  .about-left-section {
    margin-top: 1.6rem;
    margin-right: 0;
    transform: none;
  }

  .project-section {
    padding-left: 8px;
    padding-right: 8px;
  }

  .project-section.top.side-projects {
    margin-bottom: 20px;
  }

  .project-overview.top {
    padding-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .description-title {
    font-size: 1.4rem;
  }

  .description-icon-and-title {
    margin-top: 0;
  }

  .description-icon-and-title.process {
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 0;
  }

  .description-icon {
    width: 28px;
    margin-top: 0;
    margin-right: 4px;
  }

  .project-info-grid {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-top: 20px;
  }

  .project-info-cell {
    justify-content: flex-start;
    align-items: flex-start;
    padding-right: 4px;
  }

  .task-cell {
    padding-right: 4px;
  }

  .paragraph {
    margin-top: 12px;
    font-size: .9rem;
  }

  .paragraph.subtitle {
    margin-top: 12px;
    margin-bottom: 20px;
    font-size: .95rem;
  }

  .paragraph.title {
    font-size: 1.1rem;
  }

  .paragraph.title.persona {
    font-size: 1.3rem;
  }

  .paragraph.heading {
    font-size: .9rem;
  }

  .paragraph.heading.end-credits {
    text-align: center;
  }

  .paragraph.highlights {
    font-size: .9rem;
  }

  .paragraph.highlights.slider-text {
    margin-top: 0;
  }

  .paragraph.highlights.ador {
    text-align: center;
  }

  .paragraph.highlights.about {
    padding-top: .5rem;
  }

  .paragraph.highlights.button-text {
    padding-left: 12px;
    padding-right: 12px;
  }

  .paragraph.problem-points {
    font-size: .9rem;
  }

  .paragraph.next-project {
    color: var(--text-main);
    font-size: 1.2rem;
  }

  .paragraph.button-text {
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
    font-size: .9rem;
  }

  .body-2 {
    margin-top: 40px;
  }

  .paragraph-2 {
    font-size: 14px;
    line-height: 18px;
  }

  .button-main {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    font-size: .9rem;
  }

  .button-main.resume {
    text-align: left;
    margin-top: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
  }

  .button-main.copy {
    width: auto;
    padding: 4px 20px;
  }

  .button-main.next-project {
    font-size: 1rem;
  }

  .button-container {
    justify-content: center;
    align-items: center;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .button-container.with-text {
    grid-column-gap: .6rem;
    grid-row-gap: .6rem;
    border-radius: 28px;
    flex-flow: column;
    width: 100%;
    padding-left: 8px;
  }

  .button-container.with-text.highlight-last {
    padding-top: .6rem;
  }

  .button-container.with-text.bs-web {
    border-radius: 28px;
    flex-flow: column;
    padding-left: 8px;
    display: block;
  }

  .button-container.with-text.about {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    width: 100%;
  }

  .background-video {
    z-index: 1;
    width: 100vw;
    height: 56vw;
    margin-bottom: 12px;
  }

  .video-wrapper {
    flex-flow: column;
    max-width: 100%;
    margin-bottom: 0;
  }

  .user-feedback-table {
    grid-column-gap: 8px;
    grid-row-gap: 20px;
    margin-top: 0;
    margin-bottom: 60px;
    padding-left: 0;
    padding-right: 0;
  }

  .user-feedback-table.quotes {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    margin-bottom: 60px;
    padding-left: 0;
    padding-right: 0;
  }

  .user-feedback-text, .user-feedback-text.results {
    font-size: .9rem;
    line-height: 1.3;
  }

  .user-feedback-text.results.center {
    font-size: 1rem;
  }

  .green-text {
    line-height: 1.3;
  }

  .red-text {
    font-size: .9rem;
  }

  .icon-arrow {
    height: 32px;
    margin-top: -12px;
    margin-bottom: 8px;
    margin-left: 0;
    padding-right: 0;
    transform: rotate(90deg);
  }

  .icon-arrow.down {
    margin: -10px 0 10px;
    transform: rotate(90deg);
  }

  .icon-arrow.problem-to-solution {
    margin-top: 0;
    margin-bottom: 0;
    transform: none;
  }

  .image-description {
    font-size: .8rem;
  }

  .image-description.side-project {
    margin-top: 12px;
  }

  .image-description.challenge {
    font-size: .9rem;
  }

  .task-bullet-point {
    margin-bottom: 0;
  }

  .my-approach-block {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }

  .small-container {
    border-radius: 12px;
    padding: .8rem 1rem 1rem;
  }

  .small-container.challenge {
    grid-column-gap: .6rem;
    grid-row-gap: .6rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  .process-image {
    border-radius: 4px;
  }

  .project-tab-div {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: wrap;
    justify-content: center;
    align-items: stretch;
    margin-top: 12px;
  }

  .subtitle-heading {
    border-radius: 4px;
    font-size: 1.2rem;
    display: inline;
  }

  .arrow {
    height: 32px;
  }

  .arrow-button, .arrow-button.side-project-button {
    margin-bottom: 16px;
    margin-right: 20px;
  }

  .project-wrapper {
    border-radius: 14px;
    margin-top: 0;
    padding: 1px;
  }

  .project-wrapper.side {
    max-width: 100%;
  }

  .side-project-image.acorn {
    width: 90%;
  }

  .side-projects-row {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 2rem;
  }

  .side-projects-row.last {
    margin-top: 2rem;
  }

  .side-projects-page {
    padding-top: 6rem;
    padding-left: 12px;
    padding-right: 12px;
  }

  .side-projects-page.first {
    padding-left: 12px;
    padding-right: 12px;
  }

  .side-project-info {
    margin-top: 20px;
  }

  .line-2, .line-3 {
    text-align: center;
  }

  .srangsern {
    margin-bottom: 0;
  }

  .email-field {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: column;
    margin-top: 0;
  }

  .footer-info {
    font-size: .8rem;
  }

  .mrnola-image.left {
    width: 100%;
    margin-bottom: 12px;
    margin-right: 12px;
  }

  .mrnola-image.right {
    width: 100%;
    margin-bottom: 12px;
    margin-left: 12px;
  }

  .mrnola {
    max-width: 100%;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .overhanglab {
    border-radius: 4px;
    margin-top: 12px;
  }

  .side-project-heading {
    line-height: 1.3;
  }

  .polygon-video {
    width: 320px;
    height: 282px;
  }

  .play-button {
    margin-bottom: .2rem;
    margin-right: .6rem;
  }

  .pause-image {
    height: 30px;
  }

  .play-image {
    height: 2.4rem;
  }

  .media-container-copy {
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin-bottom: 40px;
    display: flex;
  }

  .media-container-copy.home, .media-container-copy.side-project {
    width: 100%;
    max-width: 312px;
  }

  .elements-video {
    width: 320px;
    height: 300px;
  }

  .text-video {
    width: 282px;
    max-width: 100%;
    height: 320px;
    max-height: 100%;
  }

  .image-wrapper {
    flex-flow: column;
    margin-bottom: 0;
  }

  .layers-image {
    width: 320px;
    max-width: 100%;
    max-height: 100%;
  }

  .home-description-text {
    color: var(--text-secondary);
    text-align: center;
  }

  .purdue-logo-text {
    font-size: 1rem;
  }

  .acorn {
    width: 100%;
  }

  .acorn-sketches {
    width: 90%;
    margin-bottom: -12px;
  }

  .acorn-guide {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    max-width: 100%;
  }

  .acorn-guide.right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .acorn-images-wrapper {
    border-radius: 4px;
    flex-flow: column;
  }

  .sam-mei-logo {
    width: 120px;
  }

  .side-bar-container {
    display: none;
  }

  .beam-studio-webpage {
    border-radius: 4px;
    margin-bottom: 16px;
  }

  .tech-text {
    font-size: .95rem;
    line-height: 1.2;
  }

  .bs-library-image.old {
    width: 90%;
  }

  ._16-to-9-video {
    border-radius: 4px;
    margin-bottom: 0;
  }

  .overview-wrapper {
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
    flex-flow: column;
  }

  .overview-subtitle {
    font-size: 1.1rem;
  }

  .overview {
    max-width: 100%;
  }

  .baixian-image {
    border-radius: 4px;
  }

  .side-project-hero {
    object-fit: contain;
    max-width: 100%;
  }

  .side-project-hero.srangsern {
    max-width: 100%;
    height: 100%;
  }

  .project-tag-wrapper {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-flow: wrap;
  }

  .bs-select-machine {
    margin-bottom: 0;
  }

  .slider {
    height: 180px;
  }

  .slider.bs-highlights {
    height: 180px;
    margin-top: -40px;
  }

  .slider.beam-studio, .slider.next-project {
    height: 180px;
  }

  .slider.ador {
    height: 232px;
  }

  .slider.beam-studio-page {
    height: 240px;
  }

  .slider.bs-redesign {
    height: 200px;
  }

  .slider.home {
    aspect-ratio: 3 / 2;
  }

  .slider-wrapper {
    margin-top: -3.2rem;
    margin-bottom: 0;
  }

  .youtube-wrapper {
    border-radius: 4px;
  }

  .project-impact-text {
    font-size: .9rem;
  }

  .project-impact-cell {
    border-radius: 6px;
    padding: 12px;
  }

  .project-impact-cell.next-step {
    border-radius: 0;
    padding-top: 0;
  }

  .project-impact-cell.impact {
    border-radius: 0;
  }

  .project-impact-table {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    margin-top: 0;
  }

  .slide-nav {
    display: none;
  }

  .site-title {
    font-size: 1.6rem;
  }

  .project-image {
    border-radius: 4px;
  }

  .next-project-container {
    flex-flow: column;
    padding-bottom: 4rem;
    padding-left: 20px;
    padding-right: 20px;
  }

  .next-project-text {
    font-size: 1.6rem;
  }

  .next-project-wrapper {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
  }

  .about-heading {
    margin-top: 1rem;
    font-size: .9rem;
  }

  .about-heading-italic {
    font-size: 1.4rem;
  }

  .icon-link {
    margin-top: -8px;
  }

  .icon-link-white {
    margin-left: 2px;
  }

  .project-heading-sentence {
    font-size: .9rem;
    line-height: 1.3;
  }

  .icon-highlight {
    width: 24px;
  }

  .icon-nextstep.other {
    width: 28px;
    height: 28px;
  }

  .image-black-bg {
    border-radius: 4px;
  }

  .image-black-bg.srangsern {
    border-style: none;
    max-width: 100%;
  }

  .image-black-bg.image-overflow {
    max-width: 320%;
  }

  .project-heading-name {
    margin-top: .6rem;
    margin-bottom: 0;
    font-size: 1.4rem;
  }

  .list-item {
    font-size: .9rem;
  }

  .icon-section {
    width: 30px;
    height: 30px;
    margin-right: 8px;
  }

  .header-content-wrapper.home {
    width: 320px;
  }

  .section-header-wrapper {
    margin-bottom: 3rem;
  }

  .section-header-wrapper.home {
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .section-header-wrapper.client-work {
    border-radius: 13px;
  }

  .nav-inner-container {
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.2rem;
  }

  .nav-inner-container.page-control {
    display: none;
  }

  .mobile-view-modal {
    z-index: 9999;
    border: 1px solid var(--stroke);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: #111111e6;
    border-radius: 16px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 2rem 1rem;
    display: flex;
    position: fixed;
    inset: auto 0% 0%;
  }

  .mobile-modal-text {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
  }

  .mobile-modal-text.center {
    margin-bottom: 0;
    font-weight: 600;
  }

  .mobile-modal-text.close {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 300;
  }

  .utility-page-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .dropdown-subtitle {
    padding-left: 12px;
    padding-right: 12px;
    font-size: .75rem;
  }

  .container-5 {
    max-width: none;
  }

  .centered-heading {
    margin-bottom: 24px;
  }

  .testimonial-card {
    box-shadow: inset 0 0 40px #85f1ff1f;
  }

  .testimonial-card.purple {
    box-shadow: inset 0 0 40px #ff85ef1f;
  }

  .testimonial-card.yellow {
    box-shadow: inset 0 0 40px #ffed851f;
  }

  .testimonial-info {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
  }

  .my-approach-item {
    font-size: .8rem;
  }

  .my-approach-number {
    width: 28px;
    height: 28px;
  }

  .project-impact-subheading {
    font-size: 1.2rem;
  }

  .persona-container {
    padding-bottom: 1.4rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  .persona-heading {
    line-height: 1.3em;
  }

  .challenges-list {
    margin-top: .6rem;
    font-size: 1rem;
  }

  .challenge-item, .persona-heading-other {
    font-size: .9rem;
  }

  .icon-text {
    grid-column-gap: .4rem;
    grid-row-gap: .4rem;
  }

  .video-icon {
    width: 3rem;
    height: 3rem;
  }

  .nav-link-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .overflow-div {
    border-radius: 4px;
  }

  .slider-mask {
    overflow: visible;
  }
}

#w-node-_0341b153-0314-29e7-b3bb-8bac71de3399-71de3397 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
}

#w-node-_057d605f-7b31-9260-49c5-9b4fea6765d6-7dad861d {
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
  grid-template-columns: 22% 1fr;
}

#w-node-_9deeb947-1908-34fd-7d48-7b857ea89942-9a35ee66 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

#w-node-_674d0534-fd5e-dd36-f9d8-751918b2d9ec-9a35ee66 {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
}

#w-node-d94b3149-a518-1379-797d-95d00ad0331b-9a35ee66, #w-node-c27a4188-34d6-c625-caa1-82a74134952f-04282929, #w-node-_9077d132-63e5-b1b6-db49-140b46ad1855-04282929, #w-node-_9077d132-63e5-b1b6-db49-140b46ad1877-04282929 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

#w-node-c10fa070-27dd-8af0-1199-c7d92fe7509c-fbc510e6, #w-node-a76bb702-f900-d804-199c-45bd2cec5633-fbc510e6 {
  grid-template-rows: auto;
  grid-template-columns: 4% 1fr;
}

#w-node-_9c472703-e176-d0f7-917b-a05c2b0b6114-fbc510e6 {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
}

#w-node-_8e874bc3-4710-7348-0ddb-6c4e2c87eada-fbc510e6 {
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
}

#w-node-_674d0534-fd5e-dd36-f9d8-751918b2d9ec-fbc510e6 {
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr;
}

#w-node-_68c95c09-21f1-8a46-79a7-14542151c72c-3c29172e {
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
}

#w-node-_4f7e8a14-f3f8-9ef6-10a4-360b5875334a-3c29172e {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
}

#w-node-_7bcd1893-65d3-6da0-34e1-947191ee425e-3c29172e {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 991px) {
  #w-node-_0341b153-0314-29e7-b3bb-8bac71de3399-71de3397 {
    grid-template-rows: auto;
    grid-template-columns: .75fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_0341b153-0314-29e7-b3bb-8bac71de3399-71de3397, #w-node-_9deeb947-1908-34fd-7d48-7b857ea89942-9a35ee66, #w-node-d94b3149-a518-1379-797d-95d00ad0331b-9a35ee66, #w-node-c27a4188-34d6-c625-caa1-82a74134952f-04282929, #w-node-_9077d132-63e5-b1b6-db49-140b46ad1855-04282929, #w-node-_9077d132-63e5-b1b6-db49-140b46ad1877-04282929, #w-node-_68c95c09-21f1-8a46-79a7-14542151c72c-3c29172e, #w-node-_7bcd1893-65d3-6da0-34e1-947191ee425e-3c29172e {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_0341b153-0314-29e7-b3bb-8bac71de3399-71de3397 {
    grid-template-rows: auto;
    grid-template-columns: 2fr;
  }

  #w-node-_057d605f-7b31-9260-49c5-9b4fea6765d6-7dad861d {
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-columns: .25fr 1fr;
  }

  #w-node-_674d0534-fd5e-dd36-f9d8-751918b2d9ec-9a35ee66, #w-node-d94b3149-a518-1379-797d-95d00ad0331b-9a35ee66, #w-node-_9077d132-63e5-b1b6-db49-140b46ad1855-04282929, #w-node-_9077d132-63e5-b1b6-db49-140b46ad1877-04282929 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  #w-node-c10fa070-27dd-8af0-1199-c7d92fe7509c-fbc510e6, #w-node-a76bb702-f900-d804-199c-45bd2cec5633-fbc510e6 {
    grid-template-rows: auto;
    grid-template-columns: 2.4rem 1fr;
  }

  #w-node-_9c472703-e176-d0f7-917b-a05c2b0b6114-fbc510e6, #w-node-_674d0534-fd5e-dd36-f9d8-751918b2d9ec-fbc510e6, #w-node-_4f7e8a14-f3f8-9ef6-10a4-360b5875334a-3c29172e, #w-node-_7bcd1893-65d3-6da0-34e1-947191ee425e-3c29172e {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }
}