/* CSS Document */
@font-face {
  font-family: "Agenda";
  src: url("../fonts/Agenda/Agenda-Bold.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Agenda";
  src: url("../fonts/Agenda/Agenda-BoldItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Agenda";
  src: url("../fonts/Agenda/Agenda-Medium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Agenda";
  src: url("../fonts/Agenda/Agenda-MediumItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Agenda";
  src: url("../fonts/Agenda/Agenda-Regular.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Agenda";
  src: url(".../fonts/Agenda/Agenda-RegularItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Agenda";
  src: url("../fonts/Agenda/Agenda-Light.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Agenda";
  src: url(".../fonts/Agenda/Agenda-LightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Dona";
  src: url("../fonts/Dona/DonaAlt-Regular.woff2") format("woff2"), url("../fonts/Dona/DonaAlt-Regular.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Dona";
  src: url("../fonts/Dona/DonaAlt-Italic.woff2") format("woff2"), url("../fonts/Dona/DonaAlt-Italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Dona";
  src: url("../fonts/Dona/DonaAlt-Medium.woff2") format("woff2"), url("../fonts/Dona/DonaAlt-Medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Dona";
  src: url("../fonts/Dona/DonaAlt-MediumItalic.woff2") format("woff2"), url("../fonts/Dona/DonaAlt-MediumItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Dona";
  src: url("../fonts/Dona/DonaAlt-Bold.woff2") format("woff2"), url("../fonts/Dona/DonaAlt-Bold.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Dona";
  src: url("../fonts/Dona/DonaAlt-BoldItalic.woff2") format("woff2"), url("../fonts/Dona/DonaAlt-BoldItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Dona";
  src: url("../fonts/Dona/DonaAlt-Heavy.woff2") format("woff2"), url("../fonts/Dona/DonaAlt-Heavy.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Dona";
  src: url("../fonts/Dona/DonaAlt-HeavyItalic.woff2") format("woff2"), url("../fonts/Dona/DonaAlt-HeavyItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
}
:root {
  /* Variables */
  --tan: #F3EDE6;
  --red: #FF7161;
  --green: #A59C31;
  --orange: #FA9347;
  --blue: #6EA1CF;
  --logobrown: #6C584F;
  --lightbrown: #897360;
  --shadow-color: #DAD0C7;
  --hero-height: 600px;
  --reset-shadow-height: 0px;
  --bento-row-height: 5/4;
  --border-radius: 15px;
  --init-animation-delay: 0s;
  --inertia-angle-X: 50deg;
  --inertia-angle-Y: 50deg;
  --max-project-content-width: 900px;
}

.filter {
  display: none;
}

body {
  position: relative;
  padding-bottom: 180px;
  margin: 0;
  background-color: var(--tan);
  font-family: "Agenda";
  font-weight: 200;
  font-size: 21px;
  letter-spacing: 0.2px;
  line-height: 150%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  color: var(--lightbrown);
}
body.firstTime {
  --init-animation-delay: 3.2s;
}

a {
  cursor: pointer;
}

a:-webkit-any-link {
  color: inherit;
  text-decoration: inherit;
}

em {
  font-family: "Dona";
  font-style: italic;
  font-weight: 500;
}

.selected .icon {
  background-position: center center;
}

video {
  max-width: 100%;
}

.mfp-bg {
  background: var(--tan) !important;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.85 !important;
}

.mfp-figure:after {
  box-shadow: none !important;
  background: transparent !important;
}

.fancybox-bg {
  background: var(--lightbrown) !important;
}

.fancybox-is-open .fancybox-bg {
  opacity: 0.85 !important;
}

#aboutPanel {
  position: absolute;
  left: 100vw;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding-top: 80px;
  overflow-y: scroll;
  transition: left 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
#aboutPanel p, #aboutPanel a {
  font-size: 22px;
  line-height: 1.4em;
}

#portfolioViewer {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  padding: 25px 30px;
  box-sizing: border-box;
  overflow-y: scroll;
}
body[data-portOpen=true] #portfolioViewer {
  display: block;
  background-color: inherit;
}

#Projects {
  position: absolute;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  top: 0px;
  left: 0px;
  padding-top: 140px;
  box-sizing: border-box;
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
  overflow-y: scroll;
}

.nav {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: auto;
}

.headerBar {
  display: flex;
  position: relative;
  gap: 40px;
  width: 100%;
  height: 120px;
  top: 0px;
  padding: 0 85px;
  box-sizing: border-box;
  font-family: "Dona";
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.75s var(--init-animation-delay) ease, height 0.5s ease, transform 0.5s ease;
}
body[data-portOpen=true] .headerBar > *:not(.logo) {
  display: none;
}
.firstTime .headerBar {
  clip-path: polygon(0% 0%, 180px 0%, 180px 100%, 0% 100%);
}
body[data-portOpen=true] .headerBar {
  position: fixed;
}
.headerBar .hamburger {
  display: none;
}
.headerBar:before {
  content: "";
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background: var(--tan);
  border-radius: 15px;
  border: 1.5px solid var(--lightbrown);
  box-sizing: border-box;
  transform: none;
  transition: transform 0.5s ease;
}

.logo {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 95px;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.25s;
}
.logo .logoAnimation {
  position: absolute;
  width: 140px;
  left: -25px;
  aspect-ratio: 16/9;
  background-size: cover;
  background-image: url(../imgs/HamAnimation.svg);
}
@keyframes logoSVGAnimate {
  from {
    background-position-y: 0%;
  }
  to {
    background-position-y: 100%;
  }
}
.logo .logoColor {
  position: absolute;
  width: 140px;
  height: 100%;
  left: -25px;
}
.logo .logoColorFront {
  background: var(--logobrown);
  mask-image: url();
  mask-mode: luminance;
  mask-position: left;
  mask-size: 280px;
  mask-repeat: no-repeat;
}
.firstTime .logo .logoColorFront {
  mask-position: left;
  mask-size: 280px;
  mask-repeat: no-repeat;
}
.logo .logoColorBack {
  background: var(--red);
  mask-image: url();
  mask-mode: luminance;
  mask-position: right;
  mask-size: 280px;
  mask-repeat: no-repeat;
}
.firstTime .logo .logoColorBack {
  mask-position: right;
  mask-size: 280px;
  mask-repeat: no-repeat;
}
.logo .logoColorBack:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.logo svg {
  display: none;
  position: absolute;
  width: 140px;
  left: -25px;
}
.logo svg #logo-back, .logo svg #logo-front {
  transition: transform 0.75s cubic-bezier(0, 0.55, 0.45, 1), fill 0.5s ease;
}
.logo svg #logo-back {
  fill: var(--logobrown);
}
.logo svg #logo-front path:first-child {
  fill: var(--logobrown);
}
.logo svg #logo-front path:last-child {
  fill: var(--red);
}
.logo svg path {
  transition: fill 0.5s ease;
}
.logo svg .logo-line {
  stroke: var(--logobrown);
  stroke-linecap: round;
  stroke-width: 45px;
  stroke-dasharray: 140;
  stroke-dashoffset: 700;
  opacity: 1;
}
.logo.mouseover #logo-back, .logo.mouseover #logo-front {
  transition: transform 0.1s cubic-bezier(0.7, 0, 0.84, 0);
}
.logo.mouseover #logo-back {
  transform: translate(37px, -37px);
}
.logo.mouseover #logo-front {
  transform: translate(-37px, 37px);
}
.logo.mouseover .logo-line {
  stroke-dashoffset: 420;
  opacity: 0;
  transition: stroke-dashoffset 0.3s 0.1s, opacity 0.15s 0.25s;
}
@keyframes logoAnimate {
  from {
    mask-position: center calc(0% + 21px);
  }
  to {
    mask-position: center calc(100% - 21px);
  }
}

.navContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  border-bottom: var(--lightbrown) 1px solid;
}
.navContainer .navigation {
  display: flex;
  gap: 10px;
}
.navContainer .contact {
  display: flex;
  padding: 0;
  border: var(--lightbrown) 1.5px solid;
  border-radius: 25px;
}
.navContainer .contact svg .outline {
  stroke: var(--lightbrown);
  stroke-width: 1.5;
}
.navContainer .contact svg .fill {
  fill: var(--lightbrown);
}
.navContainer .buttons {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.navContainer .buttons:hover {
  background: color-mix(in srgb, var(--lightbrown) 7%, transparent);
}
.navContainer .buttons:first-of-type {
  padding-left: 20px;
  border-radius: 40px 10px 10px 40px;
}
.navContainer .buttons:last-of-type {
  padding-right: 20px;
  border-radius: 10px 40px 40px 10px;
}

.spinningCat {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 95px;
}
.spinningCat:before {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: var(--blue);
  mask: url(../imgs/CatSm2.webp) 0 0/auto 100%;
  mask-mode: luminance;
}

#intro {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 580px;
  margin-bottom: -200px;
  background: url(../imgs/dissolve.webp) center;
  /*background-size: contain;*/
  background-size: 100%;
}
[data-portOpen=true] #intro {
  opacity: 0;
}

#greenFlash {
  display: flex;
  position: absolute;
  justify-content: center;
  width: 100%;
  opacity: 0.2;
  z-index: -5;
  overflow-x: clip;
  pointer-events: none;
}

.loadingBar {
  position: relative;
  flex-basis: 30%;
  height: 3px;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.loadingBar:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--lightbrown);
  opacity: 0.5;
}
.loadingBar:after {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  background-color: var(--lightbrown);
  animation: loading 1.5s ease infinite alternate;
}
@keyframes loading {
  0% {
    left: 0;
    right: 100%;
  }
  20% {
    left: 0;
    right: 100%;
  }
  50% {
    left: 0;
    right: 0;
  }
  80% {
    left: 100%;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}

#introAnim {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  background-image: url(../imgs/GrahamHartnellAnimation2s.svg);
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 16/9;
  pointer-events: none;
}
#introAnim .logoColor {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
#introAnim .logoColorFront {
  background: var(--logobrown);
  mask-image: url();
  mask-mode: luminance;
  mask-size: 200%;
  mask-position: left;
  mask-repeat: no-repeat;
}
#introAnim .logoColorBack {
  background: var(--red);
  mask-image: url();
  mask-mode: luminance;
  mask-size: 200%;
  mask-position: right;
  mask-repeat: no-repeat;
}
body:not(.firstTime) #introAnim {
  display: none;
}
@keyframes introStart {
  from {
    background-position-y: 0%;
  }
  to {
    background-position-y: 62.5%;
  }
}
@keyframes introFinish {
  from {
    background-position-y: 62.5%;
  }
  to {
    background-position-y: 100%;
  }
}

#introMessage {
  position: absolute;
  max-width: 1000px;
  opacity: 1;
  text-align: center;
  font-size: 32px;
  line-height: 1.6em;
  transform: none;
  transition: opacity 0.5s var(--init-animation-delay), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
#introMessage:after {
  content: url("../imgs/stars.svg");
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(75%, 50%);
}
.firstTime #introMessage {
  opacity: 0;
}

#aboutViewer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--lightbrown);
  color: var(--tan);
  mask-image: url(../imgs/dithermask2.png);
  mask-mode: luminance;
  mask-size: 300vw 100vh;
  mask-position: right;
  z-index: 10;
  pointer-events: none;
  transition: mask-position 1s, opacity 1s;
}
body[data-viewing=about] #aboutViewer {
  opacity: 1;
  mask-position: left;
  pointer-events: all;
}
#aboutViewer .headerBar {
  position: fixed;
}
#aboutViewer .headerBar .logo .logoColorFront {
  background: var(--tan);
}
#aboutViewer .headerBar .logo #logo-back {
  fill: var(--tan);
}
#aboutViewer .headerBar .logo #logo-front path:first-child {
  fill: var(--tan);
}
#aboutViewer .headerBar .navContainer {
  border-color: var(--tan);
}
#aboutViewer .headerBar .navContainer .contact {
  border-color: var(--tan);
}
#aboutViewer .headerBar .navContainer .contact svg .outline {
  stroke: var(--tan);
}
#aboutViewer .headerBar .navContainer .contact svg .fill {
  fill: var(--tan);
}
#aboutViewer .headerBar .spinningCat:before {
  background-color: var(--tan);
}
#aboutViewer #fullBio {
  display: flex;
  position: absolute;
  width: 85%;
  max-width: 950px;
  max-height: 75vh;
  transition-property: opacity, transform;
  transition-duration: 0.5s;
}
#aboutViewer #fullBio > div:not(.mePic) {
  flex: 60%;
  padding-left: 50px;
}
#aboutViewer #fullBio p {
  font-size: 22px;
  line-height: 1.4em;
}
#aboutViewer #fullBio a {
  pointer-events: auto;
}
@media (max-width: 768px) {
  #aboutViewer #fullBio {
    flex-direction: column;
  }
  #aboutViewer #fullBio > div:not(.mePic) {
    padding-left: 0;
  }
  #aboutViewer #fullBio p, #aboutViewer #fullBio a {
    font-size: 16px;
  }
}
@media (max-height: 700px) {
  #aboutViewer #fullBio .mePic {
    display: none;
  }
}

#aboutPanel .panel:last-of-type {
  background-position: center bottom;
  background-image: url(../imgs/footer.png);
  background-repeat: repeat-x;
  background-size: 60%;
  padding-bottom: 110px;
}

.panel {
  position: relative;
  width: 60%;
  margin: 40px;
  padding: 40px;
  background-color: #FFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  overflow: auto;
}

#aboutInnerPanel {
  padding: 30px;
  overflow: auto;
  display: flex;
}
#aboutInnerPanel div {
  background-size: cover;
  background-position: 50% 0%;
}
#aboutInnerPanel div:last-child {
  flex: 1 1 60%;
  text-align: left;
  margin-left: 70px;
}

.mePic {
  padding-top: 55%;
  background-image: url(../imgs/me2.jpg);
  background-size: cover;
  background-position: 50% 0;
  flex: 40%;
}
@media (max-width: 768px) {
  .mePic {
    margin-bottom: 30px;
  }
}

.spacer {
  display: inline-block;
}
.spacer.horizontal {
  display: block;
  height: 2px;
  margin: 10px auto;
  background-color: rgb(170, 170, 170);
}
.spacer.vertical {
  width: 2px;
  height: 200px;
  margin: 0px 50px;
  vertical-align: middle;
  background-color: rgb(170, 170, 170);
}

#gallery {
  --flex-gap: 45px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  max-width: 1800px;
  margin: auto;
  padding-top: 80px;
  padding-bottom: 200px;
  gap: var(--flex-gap);
  box-sizing: border-box;
  transition: padding 0.7s cubic-bezier(0.23, 1, 0.32, 1), gap 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.bio #gallery {
  --flex-gap: 25px;
  transform: translateY(200px);
}
[data-portOpen=true] #gallery {
  opacity: 0;
}

#featuredProjects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--flex-gap);
  transition: inherit;
}

#animationContainer {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1500px;
  z-index: 10;
}
#animationContainer.active {
  display: flex;
}
#animationContainer .portfolioWrapper {
  position: absolute;
  width: var(--dummyWidth);
  height: var(--dummyHeight);
  top: var(--dummyTop);
  left: var(--dummyLeft);
  transition-property: top, left, height, width, transform, rotate, box-shadow;
  transition-duration: 0.75s, 0.75s, 0.5s, 0.5s, 0.7s, 0.7s, 0.7s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
#animationContainer .portfolioWrapper:before {
  box-shadow: none;
}
#animationContainer .portfolioWrapper.animate {
  animation: float 4s cubic-bezier(0.45, 0, 0.55, 1) alternate infinite, inertia 1s cubic-bezier(0.45, 0, 0.55, 1) forwards 1;
}
#animationContainer .portfolioWrapper.animate[data-flags=pinned] .portfolioHero {
  grid-template-columns: 50% 50%;
}
#animationContainer .portfolioWrapper[data-layout=vertical] .portfolioContainer, #animationContainer .portfolioWrapper[data-layout=single] .portfolioContainer {
  grid-template-rows: var(--dummyGridTemplateRows);
}
#animationContainer .portfolioWrapper[data-layout=horizontal] .portfolioContainer, #animationContainer .portfolioWrapper[data-layout=horizontal-reverse] .portfolioContainer {
  grid-template-columns: var(--dummyGridTemplateColumns);
}
#animationContainer .portfolioWrapper .portfolioContainer {
  display: grid;
}
#animationContainer .portfolioWrapper .portfolioContainer .portfolioHero {
  aspect-ratio: unset;
}
#animationContainer .loadingBar {
  flex-basis: 20%;
  top: 25%;
  opacity: 0;
}
@keyframes float {
  from {
    translate: 0% 0%;
  }
  to {
    translate: 0% -25%;
  }
}
@keyframes inertia {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  5% {
    transform: rotateX(var(--inertia-angle-X)) rotateY(var(--inertia-angle-Y));
  }
  20% {
    transform: rotateX(var(--inertia-angle-X)) rotateY(var(--inertia-angle-Y));
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

#hero {
  position: sticky;
  top: 0px;
  left: 0px;
  width: 100%;
  height: var(--hero-height);
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
  transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1) 0.5s;
}
#hero .headerBar {
  position: absolute;
  height: 70px;
  padding: 0 55px;
  z-index: 1;
}
#hero .headerBar .logo .logoColorFront {
  display: none;
}
#hero .headerBar .logo .logoColorBack {
  background: var(--tan);
}
#hero .headerBar .logo .logoAnimation {
  background-image: url(../imgs/HamAnimationSingleColor.svg);
}
#hero .headerBar.tall .logo svg path {
  fill: var(--tan);
}
#hero .headerBar.tall .logo svg #logo-front path:first-child, #hero .headerBar.tall .logo svg #logo-back {
  display: none;
}
#hero .headerBar.tall .logo svg line {
  stroke: var(--tan);
}
#hero #heroComponents {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  clip-path: border-box;
}
#hero.startingPosition {
  transform: translateY(-30vh);
}

.heroLayer {
  position: absolute;
  width: 100%;
  height: var(--hero-height);
}

.heroComponent {
  background-position: center;
  background-size: cover;
  scale: 1;
  transition: scale 4s cubic-bezier(0.23, 1, 0.32, 1);
}
.startingPosition .heroComponent {
  scale: 1.6;
}
.heroComponent#heroBackground:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--portfolioColour);
  opacity: 0.8;
}
.heroComponent:nth-child(2) {
  transition-delay: 0.5s;
}
.heroComponent:nth-child(3) {
  transition-delay: 0.75s;
  transition-duration: 5s;
}

.heroLogo {
  transform: translateZ(-0.5px) scale(1.5);
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  justify-content: center;
  align-items: center;
  max-width: var(--max-project-content-width);
  padding: 0 50px;
  box-sizing: border-box;
}
[data-flags=pinned] .heroLogo {
  grid-template-columns: 1fr 1fr;
}
[data-flags=pinned] .heroLogo div {
  width: 100%;
}
.heroLogo div {
  position: relative;
  justify-self: center;
  height: 50%;
  width: 50%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.pinnedBreak {
  display: flex;
  align-items: center;
  gap: 25px;
  flex: 100%;
  margin: 100px 0 50px 0;
  color: var(--red);
  font-size: 23px;
  font-family: "Dona";
  font-weight: 500;
}
.pinnedBreak hr {
  background-color: var(--lightbrown);
  border: none;
}
body.initAnimation .pinnedBreak {
  display: none;
}

.portfolioWrapper {
  --items-per-row: 3;
  display: flex;
  position: relative;
  flex-direction: column;
  flex: 0 1 calc(100% / var(--items-per-row) - (var(--items-per-row) - 1) / var(--items-per-row) * var(--flex-gap));
  order: 0;
  transition-property: flex-basis, opacity, transform, box-shadow;
  transition-duration: 0.7s, 0.25s, 0.5s;
  transition-delay: 0s, var(--init-animation-delay), var(--init-animation-delay);
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.25, 1, 0.5, 1);
}
.portfolioWrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(137, 115, 96, 0.45);
  box-shadow: 0 5px 15px 6px rgba(137, 115, 96, 0.45);
  border-radius: var(--border-radius);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), background 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  filter: url(#noise2);
  z-index: -1;
}
.portfolioWrapper.hidden {
  opacity: 0;
  transform: translateY(-200%);
  transition: none;
}
.portfolioWrapper.hidden:before {
  background: rgba(137, 115, 96, 0.25);
  transform: translateY(200%);
  box-shadow: 0 5px 60px 45px rgba(137, 115, 96, 0.25);
}
.portfolioWrapper.resetPosition {
  transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.portfolioWrapper.resetPosition:before {
  transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 1.5s, background 1.5s;
}
.portfolioWrapper[data-flags=pinned] {
  --items-per-row: 2;
}
.portfolioWrapper:not([data-flags=pinned]) {
  order: 2;
}
.portfolioWrapper:not([data-flags=pinned]) .portfolioContainer .portfolioInfo {
  display: none;
}
.portfolioWrapper:not([data-flags=pinned]) .portfolioContainer .portfolioHero {
  aspect-ratio: 2/1;
}
.portfolioWrapper:not([data-flags=pinned]) .portfolioContainer .portfolioHero .frontComponentsContainer {
  display: none;
}
.portfolioWrapper:not([data-flags=pinned]):hover .portfolioContainer .portfolioLogo {
  height: 85%;
}
.portfolioWrapper:not([data-flags=pinned]):hover .portfolioContainer .portfolioBadges {
  bottom: 15px;
}
.initAnimation .portfolioWrapper {
  transition-property: flex-basis, opacity, transform;
  transition-duration: 1s, 0.25s, 0.5s;
  transition-delay: 0s, var(--init-animation-delay), var(--init-animation-delay);
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.34, 1.8, 0.3, 1);
}
.portfolioWrapper.initAnimation {
  opacity: 0;
  transform: translateY(100%);
}
.portfolioWrapper .portfolioContainer {
  flex: 1;
  background-color: var(--tan);
  font-size: 36px;
  font-weight: 500;
  border-radius: var(--border-radius);
  cursor: pointer;
  transform: translateZ(0);
  box-sizing: border-box;
  overflow: hidden;
  transition-property: grid-template-columns, grid-template-rows;
  transition-duration: 0.5s, 0.5s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolioWrapper .portfolioContainer:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0px solid var(--portfolioColour);
  border-radius: var(--border-radius);
  transition: border 0.1s ease-in-out;
}
.portfolioWrapper .portfolioContainer .portfolioHero {
  display: grid;
  position: relative;
  flex: 1;
  overflow: hidden;
  grid-template-columns: 100% 100%;
  transition: grid-template-columns 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
  z-index: 2;
}
.portfolioWrapper .portfolioContainer .portfolioHero:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--portfolioColour);
  opacity: 0.8;
}
.portfolioWrapper .portfolioContainer .portfolioHero .frontComponentsContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
  width: 100%;
  transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
}
.portfolioWrapper .portfolioContainer .portfolioHero .frontComponentsContainer .frontComponent {
  display: flex;
  justify-content: center;
  position: absolute;
  height: 100%;
  aspect-ratio: 2/1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1), width 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
}
.portfolioWrapper .portfolioContainer .portfolioHero .frontComponentsContainer .frontComponent:before, .portfolioWrapper .portfolioContainer .portfolioHero .frontComponentsContainer .frontComponent:after {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1), width 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
}
.portfolioWrapper .portfolioContainer .portfolioHero .portfolioLogo {
  position: relative;
  opacity: 1;
  transition: height 0.1s ease-in-out;
  width: 100%;
  height: 100%;
  padding: 0 12.5%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
}
.portfolioWrapper .portfolioContainer .portfolioInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  background-color: var(--tan);
  color: var(--portfolioColour);
  border: 0px solid var(--portfolioColour);
  transition: border 0.15s, padding 0.15s;
}
.portfolioWrapper .portfolioContainer .portfolioInfo .projectCompanyLogo {
  width: 100%;
  background: var(--portfolioColour);
  mask-repeat: no-repeat;
  z-index: 2;
}
.portfolioWrapper .portfolioContainer .portfolioInfo .projectTitle {
  font-family: Dona;
  font-size: 29px;
  font-weight: 600;
  line-height: 120%;
  order: 2;
}
.portfolioWrapper .portfolioContainer .portfolioInfo .descriptiveTag {
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  order: 4;
}
.portfolioWrapper .portfolioContainer .portfolioInfo .descriptiveTag span {
  padding: 5px 8px;
  margin-right: 10px;
  border: 1.5px solid var(--portfolioColour);
  border-radius: 10px;
}
.portfolioWrapper .portfolioContainer .portfolioInfo .projectSummary {
  color: var(--lightbrown);
  font-size: 21px;
  font-weight: 300;
  line-height: 120%;
  order: 3;
}
.portfolioWrapper[data-flags=comingsoon] .portfolioHero:after {
  content: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 163.67'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23F3EDE6; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2-2' data-name='Layer 2'%3E%3Crect class='cls-1' y='70' width='123' height='93.67' rx='9.3' ry='9.3'/%3E%3Cpath class='cls-1' d='m101.66,88.25h-9.43c-2.37,0-4.28-1.92-4.28-4.28v-38.96c0-14.39-11.26-26.57-25.64-27s-27.25,11.58-27.25,26.43v37.75c0,2.37-1.92,4.28-4.28,4.28h-9.43c-2.37,0-4.28-1.92-4.28-4.28v-36.96c0-24.87,20.35-45.65,45.22-45.23s43.67,20.19,43.67,44.44v39.52c0,2.37-1.92,4.28-4.28,4.28Z'/%3E%3C/g%3E%3C/svg%3E");
  position: absolute;
  width: 15px;
  top: 10px;
  right: 10px;
  padding: 8px 10px;
  background: var(--lightbrown);
  border-radius: 10px;
  line-height: 0;
}
.portfolioWrapper[data-title="Digital Directory"] .portfolioContainer .frontComponent:nth-child(1) {
  transform: translateY(2%);
  mask: url(../imgs/portfolio/DigitalDirectory/front-1masks.png);
  mask-type: alpha;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.portfolioWrapper[data-title="Digital Directory"] .portfolioContainer .frontComponent:nth-child(1):before {
  content: "";
  width: 26.5%;
  background-image: url(../imgs/portfolio/DigitalDirectory/front-1bs.png);
  background-size: 200%;
  background-position: 48.5% 53.5%;
  background-clip: content-box;
  transform: perspective(550px) rotateX(0deg);
  transform-origin: 50% 77%;
}
.portfolioWrapper[data-title="Digital Directory"] .portfolioContainer .frontComponent:nth-child(1):after {
  content: "";
  left: 36.8%;
  width: 26.2%;
  clip-path: circle(200% at 50% -92.7%);
  backdrop-filter: blur(2px);
}
.portfolioWrapper[data-title="Digital Directory"] .portfolioContainer .frontComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/DigitalDirectory/front-1s.png);
  transform: translateY(2%);
}
.portfolioWrapper[data-title="Digital Directory"] .portfolioContainer .frontComponent:nth-child(2):before {
  content: "";
  background-image: url(../imgs/portfolio/DigitalDirectory/front-1ds.png);
  transform: perspective(550px) rotateX(33deg) scale(0.08);
  transform-origin: 50% 75%;
}
.portfolioWrapper[data-title="Mappedin Web"] .portfolioContainer .frontComponent:nth-child(1) {
  background-image: url(../imgs/portfolio/MappedinWeb/front-3bs.png);
  background-size: 125%;
  background-position: 32% 50%;
  mask: url(../imgs/portfolio/MappedinWeb/front-3mask.png);
  mask-type: alpha;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  transform: perspective(900px) rotateX(10deg) rotateY(25deg) rotateZ(-13deg) translateY(-9%) scale(0.55);
  filter: drop-shadow(-4px 4px 6px rgba(0, 0, 0, 0.2));
}
.portfolioWrapper[data-title="Mappedin Web"] .portfolioContainer .frontComponent:nth-child(1):before {
  content: "";
  position: absolute;
  width: 31%;
  height: 75%;
  top: 4%;
  left: 11.1%;
  border-radius: 8px;
  backdrop-filter: blur(3px);
}
.portfolioWrapper[data-title="Mappedin Web"] .portfolioContainer .frontComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/MappedinWeb/front-3as.png);
  background-position-y: center;
  transform: perspective(900px) rotateX(10deg) rotateY(25deg) rotateZ(-13deg) translateY(-9%) scale(0.55);
}
.portfolioWrapper[data-title="Mappedin Web"] .portfolioContainer .frontComponent:nth-child(3) {
  background-position-y: center;
  background-image: url(../imgs/portfolio/MappedinWeb/front-1s.png);
  transform: translateX(2%) translateY(3%) rotate(3deg);
  transform-origin: bottom right;
}
.portfolioWrapper[data-title="Mappedin Web"] .portfolioContainer .frontComponent:nth-child(3):before {
  content: "";
  width: 23%;
  height: 100.5%;
  background-image: url(../imgs/portfolio/MappedinWeb/front-1cs.png);
  background-size: 300%;
  background-position: 55% -19%;
  background-color: white;
  transform: perspective(1800px) translateX(60.8%) translateY(6.2%) rotateX(30deg) rotateY(-19deg) rotateZ(9.5deg) scale(0.53);
  border-radius: 23px;
}
.portfolioWrapper[data-title="Mappedin Web"] .portfolioContainer .frontComponent:nth-child(3):after {
  content: "";
  width: 23%;
  height: 100.5%;
  background-image: url(../imgs/portfolio/MappedinWeb/front-1as.png), url(../imgs/portfolio/MappedinWeb/front-1bs.png);
  background-size: cover;
  background-position-y: 100%, 46%;
  transform: perspective(1800px) translateX(60.8%) translateY(6.2%) rotateX(30deg) rotateY(-19deg) rotateZ(9.5deg) scale(0.53);
  border-radius: 23px;
}
.portfolioWrapper[data-title="Alert Labs"] .portfolioContainer .frontComponent:nth-child(1) {
  background-image: url(../imgs/portfolio/AlertLabs/front-6s.png);
  transform: translateX(20.5%) translateY(-56%) rotate(-19deg) scale(1);
}
.portfolioWrapper[data-title="Alert Labs"] .portfolioContainer .frontComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/AlertLabs/front-8cs.png);
  transform: perspective(1400px) translateX(14%) translateY(-13.3%) rotateZ(3.5deg) rotateY(-26deg) rotateX(81deg) scale(0.375);
}
.portfolioWrapper[data-title="Alert Labs"] .portfolioContainer .frontComponent:nth-child(3) {
  background-image: url(../imgs/portfolio/AlertLabs/front-8bs.png);
  transform: perspective(1400px) translateX(21.9%) translateY(9.8%) rotateZ(-13.7deg) rotateY(71deg) rotateX(-14deg) scale(0.45);
}
.portfolioWrapper[data-title="Alert Labs"] .portfolioContainer .frontComponent:nth-child(4) {
  background-image: url(../imgs/portfolio/AlertLabs/front-8as.png);
  transform: perspective(1400px) translateX(13%) translateY(9.8%) rotateZ(3deg) rotateY(-23deg) rotateX(-10deg) scale(0.45);
}
.portfolioWrapper[data-title="Alert Labs"] .portfolioContainer .frontComponent:nth-child(5) {
  transform: perspective(1400px) translateX(-13.5%) translateY(18.4%) rotateX(10deg) rotateY(30deg) rotateZ(-9deg) scale(0.73);
}
.portfolioWrapper[data-title="Alert Labs"] .portfolioContainer .frontComponent:nth-child(5):before {
  content: "";
  background-image: url(../imgs/portfolio/AlertLabs/front-9s.png);
  background-position: 50% 6px;
  width: 49%;
  padding-bottom: 16%;
  box-sizing: border-box;
  background-clip: content-box;
  border-radius: 10px;
}
.portfolioWrapper[data-title="Alert Labs"] .portfolioContainer .frontComponent:nth-child(5):after {
  content: "";
  background-image: url(../imgs/portfolio/AlertLabs/front-7as.png);
  background-position: center;
}
.portfolioWrapper[data-title="Alert Labs"] .portfolioContainer .frontComponent:nth-child(6) {
  background-image: url(../imgs/portfolio/AlertLabs/front-7bs.png);
  transform: perspective(1400px) translateX(-4.5%) translateY(36.3%) rotateX(85deg) rotateY(-1deg) rotateZ(-32deg) scale(0.8);
}
.portfolioWrapper[data-title="Spyder Control Suite"] .portfolioContainer .frontComponent:nth-child(1) {
  background-image: url(../imgs/portfolio/SpyderControlSuite/front-2s.png);
  transform: perspective(900px) rotateX(2deg) rotateY(-33deg) rotateZ(5deg) translateY(-16%) translateX(5%) scale(0.8);
}
.portfolioWrapper[data-title="Spyder Control Suite"] .portfolioContainer .frontComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/SpyderControlSuite/front-1s.png);
  transform: translateX(-1%);
  background-position-y: bottom;
}
.portfolioWrapper[data-title=CineLife] .portfolioContainer .frontComponent:nth-child(1) {
  background-image: url(../imgs/portfolio/CineLife/front-5s.png);
  background-position-y: 50%;
  background-size: cover;
  transform: translateX(0px);
  transform-origin: bottom;
}
.portfolioWrapper[data-title=CineLife] .portfolioContainer .frontComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/CineLife/front-7s.png);
  background-position-y: 50%;
  background-size: cover;
  transform: translateX(0px) translateY(0px);
  transform-origin: bottom;
}
.portfolioWrapper[data-title=CineLife] .portfolioContainer .frontComponent:nth-child(3) {
  background-image: url(../imgs/portfolio/CineLife/front-6s.png);
  background-position-y: 50%;
  background-size: cover;
  transform: translateX(0px) translateY(0px);
  transform-origin: bottom;
}
.portfolioWrapper[data-title=CineLife] .portfolioContainer .frontComponent:nth-child(3):before {
  background-color: #363636;
  opacity: 0;
  transform: perspective(400px) translateX(5.25%) translateY(-2.2%) rotateX(18deg) rotateY(29deg) rotateZ(-12deg) scale(0.227, 0.325);
}
.portfolioWrapper[data-title=CineLife] .portfolioContainer .frontComponent:nth-child(3):after {
  background-image: url(../imgs/portfolio/CineLife/front-6b.png);
  background-position-x: 890%;
  transform: perspective(400px) translateX(4.15%) translateY(-2.2%) rotateX(18deg) rotateY(29deg) rotateZ(-12deg) scale(0.223, 0.26);
}
.portfolioWrapper:hover {
  cursor: pointer;
  transform: translateY(-5px);
}
.portfolioWrapper:hover:before {
  background: rgba(137, 115, 96, 0.38);
  box-shadow: 0 10px 22px 15px rgba(137, 115, 96, 0.38);
  transform: translateY(5px);
}
.portfolioWrapper:hover .portfolioContainer:after {
  border: 1.5px solid var(--portfolioColour);
}
.portfolioWrapper:hover[data-title="Digital Directory"] .frontComponent:nth-child(1) {
  transform: none;
}
.portfolioWrapper:hover[data-title="Digital Directory"] .frontComponent:nth-child(1):before {
  transform: perspective(550px) rotateX(35deg) scale(1.5);
}
.portfolioWrapper:hover[data-title="Digital Directory"] .frontComponent:nth-child(2) {
  transform: none;
}
.portfolioWrapper:hover[data-title="Digital Directory"] .frontComponent:nth-child(2):before {
  transform: perspective(550px) rotateX(42deg) scale(0.08);
}
.portfolioWrapper:hover[data-title="Mappedin Web"] .frontComponent:nth-child(1) {
  background-position: 17% 75%;
  transform: perspective(900px) rotateX(6deg) rotateY(15deg) rotateZ(-11deg) translateY(-9%) scale(0.55);
}
.portfolioWrapper:hover[data-title="Mappedin Web"] .frontComponent:nth-child(2) {
  transform: perspective(900px) rotateX(6deg) rotateY(15deg) rotateZ(-11deg) translateY(-9%) scale(0.55);
}
.portfolioWrapper:hover[data-title="Mappedin Web"] .frontComponent:nth-child(3) {
  transform: translateX(2%) translateY(5%) rotate(6deg);
}
.portfolioWrapper:hover[data-title="Mappedin Web"] .frontComponent:nth-child(3):before {
  background-size: 275%;
  background-position: 55% -47%;
}
.portfolioWrapper:hover[data-title="Mappedin Web"] .frontComponent:nth-child(3):after {
  background-position-y: 100%, 85%;
}
.portfolioWrapper:hover[data-title="Alert Labs"] .frontComponent:nth-child(1) {
  transform: translateX(22.5%) translateY(-55%) rotate(-24deg) scale(1);
}
.portfolioWrapper:hover[data-title="Alert Labs"] .frontComponent:nth-child(2) {
  transform: perspective(1400px) translateX(15.8%) translateY(-13.3%) rotateZ(5.7deg) rotateY(-36deg) rotateX(79deg) scale(0.375);
  transform: perspective(1400px) translateX(15.8%) translateY(-15.3%) rotateZ(5.7deg) rotateY(-36deg) rotateX(62deg) scale(0.375);
}
.portfolioWrapper:hover[data-title="Alert Labs"] .frontComponent:nth-child(3) {
  transform: perspective(1400px) translateX(23%) translateY(10.2%) rotateZ(-9.2deg) rotateY(57deg) rotateX(-11deg) scale(0.46);
}
.portfolioWrapper:hover[data-title="Alert Labs"] .frontComponent:nth-child(4) {
  transform: perspective(1400px) translateX(14.1%) translateY(9.8%) rotateZ(5.5deg) rotateY(-36deg) rotateX(-10deg) scale(0.45);
}
.portfolioWrapper:hover[data-title="Alert Labs"] .frontComponent:nth-child(5) {
  transform: perspective(1400px) translateX(-13.3%) translateY(17.8%) rotateX(10deg) rotateY(20deg) rotateZ(-7deg) scale(0.73);
}
.portfolioWrapper:hover[data-title="Alert Labs"] .frontComponent:nth-child(5):before {
  background-position: 52% -25px;
}
.portfolioWrapper:hover[data-title="Alert Labs"] .frontComponent:nth-child(6) {
  transform: perspective(1400px) translateX(-6%) translateY(35.8%) rotateX(85deg) rotateY(-1deg) rotateZ(-26deg) scale(0.8);
}
.portfolioWrapper:hover[data-title="Spyder Control Suite"] .frontComponent:nth-child(1) {
  transform: perspective(900px) rotateX(3deg) rotateY(-29deg) rotateZ(4deg) translateY(-18%) translateX(5%) scale(0.8);
}
.portfolioWrapper:hover[data-title="Spyder Control Suite"] .frontComponent:nth-child(2) {
  transform: translateX(0%);
}
.portfolioWrapper:hover[data-title=CineLife] .frontComponent:nth-child(1) {
  transform: translateX(-6%) translateY(4%);
}
.portfolioWrapper:hover[data-title=CineLife] .frontComponent:nth-child(2) {
  transform: translateX(10%) translateY(4%) skewX(22deg);
}
.portfolioWrapper:hover[data-title=CineLife] .frontComponent:nth-child(3) {
  transform: translateX(2.5%);
}
.portfolioWrapper:hover[data-title=CineLife] .frontComponent:nth-child(3):before {
  opacity: 0.8;
}
.portfolioWrapper:hover[data-title=CineLife] .frontComponent:nth-child(3):after {
  background-position-x: 100%;
}
.portfolioWrapper.Mappedin .projectCompanyLogo {
  height: 30px;
  mask-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51.01 80.95'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23897361; %7D %3C/style%3E%3C/defs%3E%3Cg id='N'%3E%3Cpath class='cls-1' d='m47.7,24.75h-8.65c-2.18,0-3.23.97-3.23,3.07v26.38l-17.62-27.13c-1.21-1.87-2.02-2.25-4.44-2.32H5.19c-2.26,0-3.31.97-3.31,3.07v50.06c0,2.1,1.05,3.07,3.31,3.07h8.65c2.26,0,3.31-.97,3.31-3.07v-26.23l17.7,26.98c1.29,1.95,2.02,2.32,4.44,2.32h8.4c2.26,0,3.31-.97,3.31-3.07V27.83c0-2.1-1.05-3.07-3.31-3.07Z'/%3E%3C/g%3E%3Cg id='Dot'%3E%3Ccircle class='cls-1' cx='9.51' cy='9.51' r='9.51'/%3E%3C/g%3E%3C/svg%3E");
}
.portfolioWrapper.AlertLabs .projectCompanyLogo {
  height: 20px;
  mask-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316.54 136.76'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23897361; %7D %3C/style%3E%3C/defs%3E%3Cg id='N'%3E%3Cpath class='cls-1' d='m159.23,0c3.17,2.61,6.51,4.99,9.48,7.88,3.74,3.64,7.95,6.81,11.91,10.23,2.13,1.85,4.12,3.87,6.24,5.73,3.41,2.99,6.98,5.82,10.3,8.9,4.25,3.94,8.75,7.57,13.04,11.46,2.19,1.98,4.23,4.13,6.42,6.12,1.14,1.04,2.51,1.82,3.68,2.83,2.06,1.79,4.01,3.7,6.07,5.49,1.55,1.35,3.23,2.54,4.81,3.87,1.97,1.65,3.82,3.4,5.19,5.63,1.12,1.82,1.6,3.74,1.59,5.85-.02,6.42,0,12.84,0,19.25,0,7.58.01,15.17.02,22.75,0,.58,0,1.15,0,2.04,1.31.06,2.52.16,3.73.16,19.15,0,37.95,0,59.6,0,2.08,0,4.18-.11,6.24.09,3.83.36,7.13,1.7,8.59,5.71.03.07.26.07.4.1v6c-.14.05-.38.08-.4.16-1.12,4.63-5.2,6.12-8.86,6.23-2.58.07-5.16.03-7.74.03-164.28,0,91.44,0-72.84-.01-2.22,0-4.43-.05-6.83-.08-.08-1.37-.19-2.43-.19-3.49.02-17.92.02-35.84.11-53.76,0-1.74-.47-3.02-1.77-4.13-3.47-2.99-6.9-6.02-10.34-9.04-12.51-10.99-25.01-22-37.54-32.98-3.94-3.46-7.94-6.85-12.05-10.39-1.8,1.52-3.63,3.01-5.4,4.58-4.7,4.16-9.35,8.37-14.06,12.52-5.13,4.52-10.32,8.97-15.46,13.49-7.71,6.78-15.42,13.58-23.1,20.4-3.15,2.8-3.1,2.83-3.1,6.94,0,17.34,0,34.67,0,52.01,0,1.16,0,2.32,0,3.79-1.3.06-2.43.15-3.56.15-12.32.02-24.65.03-36.97.03-152.04,0,115.92,0-36.12,0-2.33,0-4.73-.38-6.97.06-2.22.44-4.21-.07-6.27-.44C3.01,135.42.1,132.13,0,127.98c-.04-1.61.09-3.35.69-4.81,1.52-3.68,4.98-4.5,8.45-4.89,2.14-.24,4.32-.09,6.49-.09,35.22,0,.44,0,35.66,0,118.65,0-112.7,0,5.95,0,6.16,0,12.32,0,18.48,0,.89,0,1.79,0,2.78,0,.11-.67.22-1.06.22-1.45,0-14.59.03-29.17-.06-43.76-.01-2.04-.03-3.92,1.42-5.51,1-1.1,1.95-2.26,3.05-3.25,1.45-1.31,3.08-2.44,4.55-3.74,1.6-1.43,3.1-2.99,4.66-4.46,1.08-1.02,2.16-2.07,3.32-3,1.28-1.03,2.8-1.79,3.96-2.94,5.71-5.64,12.13-10.45,18.05-15.84,1.22-1.11,2.28-2.41,3.54-3.47,3.11-2.63,6.32-5.15,9.45-7.76,1.08-.9,2.02-1.98,3.07-2.91,1.39-1.23,2.83-2.39,4.25-3.58.64-.54,1.41-.98,1.86-1.65,2.02-2.94,5.1-4.61,7.79-6.75.56-.45,1.12-.91,1.58-1.45,1.65-1.95,3.35-3.82,5.69-5.01'/%3E%3Cpath class='cls-1' d='m158.23,134.19c-10.55-.01-17.96-7.92-18.19-18.85-.23-11.04,9.55-18.46,18.36-18.31,9.25.16,18.63,8.05,18.33,18.99-.29,10.41-7.96,18.18-18.5,18.17Z'/%3E%3C/g%3E%3C/svg%3E");
}
.portfolioWrapper.Christie .projectCompanyLogo {
  height: 15px;
  mask-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2263.31 335.86'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23897361; %7D %3C/style%3E%3C/defs%3E%3Cg id='N'%3E%3Cg%3E%3Cpath class='cls-1' d='m480.99,328.94c10.15-41.33,20.22-82.34,30.36-123.65-4.81,0-9.29,0-13.77,0-18.74,0-37.5.45-56.21-.24-6.71-.25-7.09,3.36-8.13,7.74-1.74,7.36-3.57,14.69-5.44,22.02-1.93,7.59-3.98,15.15-5.94,22.73-2.13,8.26-4.26,16.52-6.31,24.8-1.49,6-2.78,12.04-4.31,18.03-1.53,6.01-3.3,11.95-4.84,17.96-.88,3.41-1.51,6.89-2.28,10.47h-116.22c1.27-5.55,2.43-10.95,3.74-16.31,1.36-5.58,2.84-11.14,4.27-16.7,1.96-7.63,3.95-15.25,5.9-22.89,1.86-7.32,3.65-14.66,5.52-21.97,1.88-7.36,3.86-14.69,5.7-22.05,1.5-6.01,2.79-12.08,4.31-18.09,1.52-5.97,3.3-11.88,4.8-17.85,1.49-5.92,2.71-11.91,4.19-17.83,1.49-5.98,3.2-11.91,4.73-17.89,1.15-4.49,2.12-9.03,3.26-13.53,1.55-6.15,3.22-12.28,4.77-18.43,1.13-4.49,2.09-9.02,3.23-13.51,1.56-6.14,3.24-12.25,4.8-18.4,1.44-5.69,2.75-11.42,4.19-17.11,1.91-7.57,3.92-15.1,5.81-22.67,1.46-5.85,2.77-11.73,4.18-17.59,1.72-7.15,3.96-14.23,5.07-21.47.79-5.17,3.85-4.66,7.36-4.66,34.9.03,69.8.13,104.7-.1,4.75-.03,5.47,1.36,4.39,5.42-2.33,8.74-4.42,17.54-6.67,26.31-3.95,15.38-7.88,30.76-11.95,46.1-2.63,9.91-5.54,19.74-8.22,29.63-.8,2.94-1.25,5.98-1.86,8.98.42.16.64.32.86.32,24.82.02,49.65.14,74.46-.3,1.3-.02,2.93-4.67,3.71-7.37,2.03-7.03,3.68-14.16,5.46-21.26,1.55-6.14,3.01-12.31,4.63-18.43,2.18-8.24,4.54-16.43,6.69-24.68,1.86-7.11,3.46-14.29,5.31-21.41,1.9-7.32,3.92-14.62,6.02-21.89.17-.58,1.34-1.25,2.05-1.25,35.4-.06,70.8-.06,106.2.04.58,0,1.78,1.57,1.65,2.16-3.27,14.01-6.58,28.01-10.09,41.95-2.79,11.07-5.98,22.05-8.8,33.12-2.83,11.12-5.34,22.32-8.17,33.45-2.48,9.79-5.3,19.5-7.79,29.28-1.86,7.32-3.33,14.74-5.16,22.07-2.11,8.46-4.47,16.86-6.65,25.31-1.82,7.05-3.52,14.13-5.32,21.18-1.87,7.31-3.83,14.6-5.67,21.92-1.5,5.93-2.84,11.89-4.33,17.82-1.5,5.98-3.12,11.94-4.65,17.91-1.47,5.75-2.84,11.52-4.34,17.26-2,7.66-4.08,15.3-6.1,22.95-.67,2.54-1.71,5.08-1.78,7.64-.11,4.32-2.11,5.08-6.06,5.06-34.89-.15-69.78-.09-105.24-.09Z'/%3E%3Cpath class='cls-1' d='m2224.61,129.51c-1.19,5.08-2.25,9.88-3.44,14.65-1.16,4.64-2.48,9.23-3.69,13.85-1.62,6.19-3.24,12.38-4.78,18.59-1.46,5.92-2.87,11.86-4.21,17.81-.89,3.97-1.29,7.15-7.26,7.09-36.9-.37-73.8-.19-110.7-.19-.91,0-1.81,0-2.71,0-4.39,16.99-8.73,33.83-13.13,50.85h141.17c-1.34,5.41-2.61,10.52-3.87,15.62-1.84,7.47-3.6,14.96-5.54,22.4-1.6,6.1-3.53,12.12-5.11,18.23-1.43,5.56-2.41,11.25-3.97,16.77-.41,1.46-2.24,3.61-3.41,3.62-83.63.17-167.26.16-250.88.16h-1.57c1.13-5.13,2.12-10.07,3.32-14.95,1.5-6.07,3.19-12.1,4.77-18.15,1.95-7.47,3.92-14.94,5.79-22.42,1.47-5.85,2.74-11.76,4.23-17.61,1.53-6.03,3.32-11.99,4.82-18.02,1.49-5.97,2.69-12.02,4.18-18,1.49-5.96,3.27-11.85,4.78-17.8,1.17-4.6,2.05-9.27,3.21-13.87,1.52-6.05,3.25-12.04,4.78-18.09,1.46-5.75,2.77-11.54,4.2-17.3,1.51-6.06,3.12-12.1,4.63-18.17,1.49-5.96,2.86-11.94,4.37-17.9,1.54-6.06,3.25-12.08,4.76-18.14,1.67-6.7,3.16-13.46,4.82-20.16,1.56-6.28,3.3-12.52,4.87-18.79,1.76-7.01,3.38-14.05,5.12-21.06,2.3-9.21,4.63-18.42,7.09-27.59.14-.53,1.56-1.03,2.38-1.03,79.3-.05,158.59-.05,237.89.09.62,0,1.95,2.14,1.75,2.99-2.49,10.58-5.14,21.13-7.87,31.65-2.56,9.88-5.27,19.73-7.88,29.6-.75,2.83-1.08,5.81-2.19,8.47-.53,1.27-2.43,2.81-3.72,2.81-40.73.15-81.46.12-122.19.12-.9,0-1.8,0-2.47,0-3.65,14.67-7.23,29.08-10.91,43.86h118.56Z'/%3E%3Cpath class='cls-1' d='m1167.8,328.94c2.04-7.64,4.05-14.97,5.93-22.34,1.8-7.06,3.43-14.17,5.2-21.25,1.56-6.23,3.24-12.44,4.84-18.66.73-2.84,2.06-5.7,2.01-8.53-.12-6.38,4.21-2.9,6.23-2.72,3.93.36,7.72,2.09,11.65,2.63,8.88,1.22,17.81,2.1,26.73,3.06,6.49.7,12.98,1.45,19.49,1.96,6.27.49,12.61,1.35,18.84.89,11.46-.84,23.08-1.56,34.22-4.13,11.02-2.55,20.78-8.32,25.17-19.88,4.8-12.62.55-20.01-10.42-26.47-16.73-9.86-34.54-17.88-51.61-27.19-14.65-7.99-28.52-17.42-37.49-31.89-4-6.46-6.37-14.09-8.53-21.47-1.54-5.28-2.15-11.04-2.03-16.56.28-12.88,2.43-25.49,7.15-37.63,5.49-14.11,14.14-26,25.4-35.9,11.56-10.17,24.94-17.59,39.36-22.9,8.72-3.21,17.7-5.84,26.73-8.01,8.98-2.16,18.16-3.58,27.3-5.05,5.83-.94,11.73-1.7,17.62-1.98,17.6-.83,35.22-1.94,52.83-1.87,12.39.05,24.77,1.76,37.14,2.86,5.56.49,11.1,1.25,16.64,1.96,4.75.61,9.52,1.19,14.18,2.23.44.1.52,3.5.15,5.24-1.08,5.01-2.46,9.95-3.74,14.91-1.8,7.01-3.62,14.03-5.42,21.04-1.53,5.95-3.07,11.9-4.56,17.87-1.11,4.44-1.94,8.97-3.41,13.29-.28.81-3.03,1.34-4.5,1.11-12-1.85-23.91-4.42-35.97-5.76-11.87-1.32-23.92-2.45-35.79-1.85-11.68.59-23.61,1.69-34.33,7.65-15.22,8.46-14,27.05-.33,35.53,12.57,7.8,26.11,14.03,38.98,21.36,13.06,7.44,26.49,14.49,38.55,23.35,10.8,7.93,19.57,18.49,22.29,32.34,1.67,8.51,3.72,17.29,3.22,25.82-1.11,19.1-6.89,37.06-18.19,52.82-12.11,16.88-28.33,28.95-46.91,37.73-8.91,4.21-18.36,7.46-27.82,10.29-9.76,2.91-19.8,5.01-29.8,7.03-6.95,1.4-14.03,2.33-21.1,3-9.75.92-19.53,1.61-29.31,2.01-13.11.54-26.23.92-39.35.98-9.13.04-18.26-.46-27.38-.97-8.54-.48-17.09-1.02-25.58-2.03-8.06-.96-16.05-2.56-24.28-3.92Z'/%3E%3Cpath class='cls-1' d='m263.69,242.63c-7.28,29.05-14.53,58-21.97,87.69-7.59.52-15.65,1.23-23.73,1.59-17.77.77-35.56,1.96-53.33,1.8-10.71-.1-21.42-2.27-32.09-3.81-5.88-.85-11.75-2-17.47-3.59-6.37-1.78-12.65-3.96-18.79-6.41-17.67-7.06-34.07-16.4-47.45-30.01-8.53-8.67-16.38-18.11-23.69-27.84-10.09-13.43-16.85-28.64-20.69-45-1.72-7.33-3.36-14.79-3.9-22.27-.66-9.31-.92-18.78.02-28.04,1.96-19.31,6.59-38.16,14.61-55.85,7.43-16.4,17.28-31.37,29.4-44.95,16.74-18.76,36.82-32.87,59.29-43.53,11.04-5.24,22.92-8.87,34.67-12.4,9.02-2.71,18.38-4.43,27.68-6.04,8.19-1.42,16.48-2.62,24.77-2.96C208.49.3,225.96-.02,243.43,0c7.57,0,15.16,1.1,22.71,1.93,7.62.84,15.23,1.78,22.79,3,9.19,1.48,18.33,3.24,27.46,5.07.47.09,1.01,2.11.78,3.05-2.56,10.17-5.21,20.31-7.96,30.43-2.89,10.67-5.94,21.3-8.87,31.96-1.06,3.84-1.88,7.74-3.05,11.54-.22.71-1.75,1.71-2.35,1.52-6.67-2.11-13.18-4.78-19.92-6.59-5.76-1.55-11.74-2.55-17.68-3.16-9.52-.97-19.12-2.19-28.64-1.86-9.56.33-19.06,2.42-28.59,3.76-12.53,1.76-24,6.54-34.7,12.99-17.71,10.67-31.53,25.1-38.81,44.66-3.35,8.99-5.24,18.58-7.11,28.03-1.07,5.43-1.27,11.16-.99,16.71.33,6.5.54,13.32,2.68,19.34,5.05,14.23,14,25.78,27.04,33.96,9.9,6.22,20.37,10.79,32.12,11.81,9.81.85,19.64,1.6,29.48,1.92,5.61.18,11.3-.19,16.86-.99,9.49-1.35,18.91-3.23,28.36-4.89,2.72-.48,5.43-.98,8.65-1.57Z'/%3E%3Cpath class='cls-1' d='m1585.89,85.68h-79.52c1.35-5.61,2.59-10.94,3.92-16.24,2.14-8.59,4.33-17.17,6.5-25.75,2.23-8.82,4.48-17.64,6.69-26.47.24-.95.29-1.95.43-2.93.53-3.66,2.43-4.56,6.24-4.55,89.78.16,179.55.12,269.33.12,6.69,0,7.33,1.53,5,7.83-2.14,5.75-3.27,11.87-4.8,17.84-1.92,7.46-3.82,14.92-5.69,22.39-1.48,5.93-2.86,11.88-4.33,17.82-.72,2.91-1.35,5.87-2.41,8.66-.27.7-2.04,1.19-3.12,1.19-26.48.06-52.97.29-79.45-.14-5.65-.09-6.96,2.25-8.04,6.76-2.21,9.26-4.97,18.39-7.26,27.63-2.07,8.35-3.67,16.82-5.73,25.18-2.11,8.58-4.61,17.06-6.77,25.62-1.84,7.29-3.37,14.67-5.19,21.97-1.82,7.29-3.92,14.51-5.76,21.8-1.82,7.23-3.41,14.52-5.22,21.76-1.51,6.06-3.24,12.06-4.78,18.11-1.47,5.79-2.75,11.62-4.21,17.4-1.57,6.22-3.29,12.4-4.87,18.62-1.42,5.58-2.71,11.19-4.12,16.78-1.62,6.45-3.32,12.88-4.94,19.33-.17.69-.02,1.47-.02,2.54-1.1,0-2.07,0-3.04,0-35.81,0-71.62-.04-107.43.07-3.58.01-4.52-.64-3.5-4.37,3.08-11.3,5.63-22.75,8.61-34.08,3.3-12.52,6.96-24.94,10.25-37.47,2.87-10.93,5.32-21.97,8.17-32.9,2.83-10.89,6.05-21.69,8.87-32.59,2.84-10.99,5.28-22.08,8.12-33.07,2.47-9.57,5.37-19.03,7.85-28.59,2.51-9.68,4.71-19.45,7.12-29.16.89-3.6,1.99-7.16,3.11-11.1Z'/%3E%3Cpath class='cls-1' d='m1018.32,75.79c-1.84,29.42-10.39,55.41-31.52,76.21-20.42,20.1-45.39,32.15-73.2,40.9,9.78,45.79,25,90.37,37.62,136.05-1.6,0-2.5,0-3.39,0-36.73,0-73.46.03-110.19-.12-1.18,0-3.16-1.68-3.39-2.84-1.29-6.55-1.96-13.22-3.22-19.77-1.41-7.34-3.32-14.59-4.84-21.91-1.48-7.18-2.62-14.43-4.14-21.61-1.83-8.68-3.98-17.3-5.84-25.97-1.18-5.52-2.04-11.11-3.14-16.64-.93-4.67-1.95-9.33-3.06-13.96-.09-.39-1.11-.78-1.7-.79-7.66-.05-15.34-.29-22.97.24-1.17.08-2.44,3.71-3.07,5.87-2.39,8.2-4.56,16.46-6.75,24.72-3.18,11.97-6.3,23.95-9.48,35.92-2.65,9.98-5.32,19.95-8.03,29.91-2.28,8.37-4.58,16.74-7.01,25.07-.23.78-1.43,1.81-2.19,1.81-33.89.09-67.78.08-102.45.08,1.94-7.32,3.88-14.3,5.63-21.33,1.49-5.95,2.68-11.98,4.17-17.93,1.49-5.98,3.25-11.9,4.78-17.87,1.48-5.79,2.78-11.63,4.2-17.43,1.45-5.95,2.95-11.88,4.44-17.82,1.51-6,3.06-11.99,4.54-18,1.1-4.45,1.5-9.2,3.42-13.25.92-1.94,4.52-2.81,7.06-3.78,9.12-3.48,18.32-6.72,27.44-10.18,10.22-3.88,20.35-7.98,30.57-11.83,11.8-4.44,23.69-8.63,35.48-13.08,12.92-4.87,25.77-9.93,38.68-14.86,12.24-4.67,24.48-9.32,36.76-13.88,12.98-4.81,26.03-9.42,39-14.26,13.71-5.12,27.34-10.46,41.03-15.64,15.21-5.76,30.46-11.44,45.68-17.18,12.83-4.85,25.65-9.74,39.06-14.83Z'/%3E%3Cpath class='cls-1' d='m1772.28,328.31c1.34-5.04,2.77-10.25,4.11-15.47,1.14-4.42,2.15-8.87,3.28-13.29,1.6-6.29,3.27-12.56,4.86-18.85,1.09-4.35,2.05-8.73,3.14-13.08,1.59-6.29,3.3-12.55,4.86-18.85,1.76-7.11,3.37-14.26,5.14-21.38,1.82-7.35,3.77-14.66,5.61-22.01,1.49-5.93,2.89-11.88,4.38-17.81,1.86-7.38,3.79-14.74,5.66-22.11,2.13-8.4,4.23-16.8,6.33-25.21,1.81-7.27,3.59-14.55,5.42-21.81,2.18-8.67,4.38-17.33,6.58-25.99,2.22-8.73,4.48-17.45,6.67-26.19,1.49-5.92,2.83-11.88,4.33-17.8,1.86-7.32,3.87-14.6,5.73-21.91,1.16-4.55,2.02-9.19,3.35-13.69.35-1.19,1.93-2.87,2.95-2.87,36.72-.15,73.45-.14,110.17.01.49,0,1.58,2.21,1.36,3.15-2.09,8.97-4.36,17.89-6.65,26.81-2.19,8.5-4.56,16.95-6.67,25.46-2.86,11.52-5.44,23.1-8.34,34.6-2.12,8.43-4.71,16.74-6.84,25.16-2.53,10-4.68,20.1-7.19,30.11-2.5,9.97-5.36,19.86-7.86,29.83-2.17,8.68-3.98,17.45-6.09,26.15-2.58,10.67-5.24,21.32-8,31.94-3.91,15.08-8.06,30.11-11.89,45.22-3.19,12.6-6.02,25.3-9.17,37.92-.26,1.02-1.79,2.47-2.74,2.47-37.22.11-74.45.08-111.67.06-.07,0-.14-.09-.83-.59Z'/%3E%3Cpath class='cls-1' d='m1197.68,9.8c-1.64,6.14-3.18,11.74-4.61,17.36-1.12,4.43-2.05,8.92-3.16,13.36-1.55,6.17-3.24,12.31-4.79,18.48-1.44,5.72-2.76,11.48-4.19,17.2-1.86,7.44-3.79,14.87-5.68,22.3-1.45,5.69-2.82,11.4-4.32,17.08-1.72,6.53-3.62,13.02-5.3,19.57-1.41,5.49-2.54,11.06-3.93,16.56-2.98,11.79-6.13,23.53-9.05,35.33-1.72,6.95-3.02,14-4.74,20.95-1.81,7.27-4,14.45-5.83,21.71-1.83,7.22-3.34,14.52-5.15,21.75-1.84,7.34-3.95,14.61-5.8,21.95-1.5,5.99-2.69,12.06-4.2,18.04-1.51,6-3.3,11.94-4.85,17.93-1.46,5.66-2.66,11.4-4.21,17.04-.27,1-1.65,2.42-2.52,2.43-37.23.12-74.45.1-111.68.08-.15,0-.31-.1-.74-.26,1.15-4.76,2.28-9.56,3.48-14.34,1.49-5.9,3.06-11.78,4.58-17.68,1.89-7.35,3.76-14.71,5.62-22.07,1.47-5.83,2.93-11.65,4.37-17.49,1.81-7.31,3.6-14.62,5.38-21.93,1.74-7.16,3.38-14.35,5.22-21.49,1.96-7.57,4.14-15.09,6.14-22.65,1.17-4.42,2.14-8.9,3.25-13.34,1.56-6.18,3.21-12.34,4.74-18.53,1.47-5.91,2.78-11.86,4.26-17.77,1.51-6.03,3.18-12.03,4.71-18.05,1.14-4.46,2.14-8.95,3.28-13.41,1.58-6.23,3.29-12.43,4.83-18.67,1.46-5.94,2.72-11.94,4.17-17.89,1.32-5.41,1.93-11.26,4.53-15.99,1.4-2.54,6.27-3.32,9.68-4.61,8.51-3.21,17.08-6.25,25.63-9.37,7.84-2.86,15.68-5.72,23.51-8.61,7.53-2.78,15.05-5.61,22.59-8.38,9.68-3.55,19.39-7.02,29.07-10.59,4.98-1.84,9.91-3.8,15.68-6.03Z'/%3E%3Cpath class='cls-1' d='m679.78,196.41c1.43-6.05,2.51-10.8,3.69-15.53,2.06-8.3,4.13-16.59,6.26-24.88,1.97-7.65,4.07-15.26,6.02-22.91,1.54-6.03,2.89-12.11,4.39-18.15,1.8-7.22,3.67-14.43,5.5-21.64,1.51-5.94,2.96-11.9,4.49-17.83,1.9-7.36,3.92-14.69,5.78-22.06,1.48-5.86,2.75-11.76,4.22-17.63,1.52-6.08,3.16-12.13,4.75-18.19.4-1.53,1.29-3.12,1.11-4.59-.45-3.74,1.92-3.15,4.13-3.15,59.31.01,118.61,0,177.92,0,.91,0,1.82,0,4.34,0-77.89,62.47-154.72,124.09-232.6,186.55Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.portfolioBadgesContainer {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 2;
}
.portfolioBadgesContainer .portfolioBadges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: absolute;
  width: 100%;
  bottom: -30px;
  transition: 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}
.portfolioBadgesContainer .portfolioBadges .icon {
  background-position: center right;
  background-size: cover;
  height: 20px;
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
}
.projectContainer {
  display: flex;
  align-items: flex-start;
  order: 4;
  margin-top: 30px;
  transition: margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.projectContainer .projectMedia {
  --thumb-gap: 15px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  gap: var(--thumb-gap);
  flex: 0 0 20%;
  max-height: 100px;
  overflow: visible;
}
.projectContainer .projectMedia .thumb {
  --thumbs-per-row: 1;
  position: relative;
  flex: 0 1 calc(100% / var(--thumbs-per-row) - (var(--thumbs-per-row) - 1) / var(--thumbs-per-row) * var(--thumb-gap));
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius);
  overflow: hidden;
  transform-origin: left;
  transition-property: transform, opacity, border-radius;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.projectContainer .projectMedia .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projectContainer .projectMedia .thumb:first-of-type:before, .projectContainer .projectMedia .thumb:first-of-type:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: var(--shadow-color);
  transition: opacity 0.5s, background 0.5s;
}
.projectContainer .projectMedia .thumb:first-of-type:before {
  mix-blend-mode: color;
}
.projectContainer .projectMedia .thumb:first-of-type:after {
  opacity: 0.6;
}
.projectContainer .projectInfo {
  flex-direction: column;
  position: relative;
  flex: 0 0 40%;
  padding: 30px;
  background-color: var(--tan);
  box-shadow: 0 2px 6px rgba(137, 115, 96, 0.4);
  border-radius: var(--border-radius);
  border: 1.5px solid var(--projectColour);
  transition: background-color 0.1s ease-in-out, padding-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.projectContainer .projectInfo .headingBlock {
  display: block;
  position: relative;
}
.projectContainer .projectInfo .headingBlock h1 {
  color: var(--projectColour);
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
  text-wrap: balance;
}
.projectContainer .projectInfo .headingBlock h3 {
  font-weight: 300;
  font-size: 23px;
  margin-top: 0em;
  margin-bottom: 0em;
}
.projectContainer .projectInfo .projectDescription {
  max-height: 0;
  font-weight: 300;
  line-height: 140%;
  box-sizing: border-box;
  opacity: 0;
  overflow: hidden;
  transition-property: max-height, opacity;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.projectContainer .projectInfo .projectDescription p {
  margin-top: 20px;
}
.projectContainer .projectInfo .projectInnerMedia {
  display: none;
}
.projectContainer .projectInfo .projectDownload {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--projectColour);
  padding: 15px;
  margin-top: 20px;
  color: var(--tan);
  font-family: "Dona";
  font-weight: 500;
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
}
.projectContainer .projectInfo .projectDownload:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(137, 115, 96, 0);
  transition: background 0.1s;
}
.projectContainer .projectInfo .projectDownload:hover:after {
  background: rgba(137, 115, 96, 0.25);
}
.projectContainer .projectInfo .close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 36px;
  top: -18px;
  right: -18px;
  aspect-ratio: 1/1;
  opacity: 0;
  background: var(--red);
  border-radius: 20px;
  transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.projectContainer .projectInfo .close:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cline x1='1' y1='1' x2='15' y2='15' stroke='white' stroke-width='3'/%3E%3Cline x1='15' y1='1' x2='1' y2='15' stroke='white' stroke-width='3'/%3E%3C/svg%3E%0A");
  display: flex;
  height: 24px;
  width: 16px;
  background: none;
  transition: background 0.1s;
}
.projectContainer .projectInfo .close:hover:after {
  background: rgba(137, 115, 96, 0.1);
}
.projectContainer .projectInfo:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition: background-color 0.1s ease-in-out;
  pointer-events: none;
}
.projectContainer.active .projectInfo .projectDescription {
  max-height: 600px;
  opacity: 1;
}
.projectContainer.active .projectMedia .thumb:before, .projectContainer.active .projectMedia .thumb:after {
  background: none;
  opacity: 0.5;
}
.projectContainer.active .videoThumb:after {
  content: url("data:image/svg+xml,%3Csvg width='20' height='23' viewBox='0 0 20 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L20 11.5L0 23V0Z' fill='white'/%3E%3C/svg%3E%0A") !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  opacity: 0.6;
  transition: opacity 0.1s !important;
}
.projectContainer.active .videoThumb:hover:after {
  opacity: 0.8;
}
.projectContainer.active .close {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
.projectContainer.active.first-of-type {
  margin-top: 0px;
}
.projectContainer:not(.active) .projectInfo:hover {
  cursor: pointer;
  box-shadow: 0 7px 12px rgba(137, 115, 96, 0.4);
}
.projectContainer:not(.active) .projectInfo:hover:after {
  background: rgba(137, 115, 96, 0.1);
}
.projectContainer:not(.active) .projectMedia .thumb {
  pointer-events: none;
  transition-delay: 0s !important;
}
.projectContainer:not(.active) .projectMedia .thumb:nth-of-type(1) ~ .thumb {
  opacity: 0;
  transform: translate(0%, 50%);
}
.projectContainer:nth-of-type(odd) {
  flex-direction: row;
}
.projectContainer:nth-of-type(odd):not(.active) .thumb:nth-of-type(1) {
  transform: translate(0%, -50%);
}
.projectContainer:nth-of-type(odd):not(.active) .thumb:nth-of-type(1):hover {
  transform: translate(calc(0% - 5px), calc(-50% - 5px));
}
.projectContainer:nth-of-type(odd):not(.active) .thumb:first-child:nth-last-child(n+3) {
  transform: translate(0%, -50%) scale(2.1);
  border-radius: 7px;
}
.projectContainer:nth-of-type(odd):not(.active) .thumb:nth-of-type(2) {
  transform: translate(60%, -80%) scale(1.15);
}
.projectContainer:nth-of-type(odd):not(.active) .thumb:nth-of-type(3) {
  transform: translate(20%, 20%) scale(0.75);
}
.projectContainer:nth-of-type(odd):not(.active) .projectInfo {
  transform: translateX(-40px);
}
.projectContainer:nth-of-type(odd).active .projectInfo {
  transform: translateX(15px);
}
.projectContainer:nth-of-type(even) {
  flex-direction: row-reverse;
}
.projectContainer:nth-of-type(even):not(.active) .thumb:nth-of-type(1) {
  transform: translate(0%, -50%);
}
.projectContainer:nth-of-type(even):not(.active) .thumb:nth-of-type(1):hover {
  transform: translate(calc(0% + 5px), calc(-50% + 5px));
}
.projectContainer:nth-of-type(even):not(.active) .thumb:first-child:nth-last-child(n+3) {
  transform: translate(0%, -50%) scale(2.1);
  border-radius: 7px;
}
.projectContainer:nth-of-type(even):not(.active) .thumb:nth-of-type(2) {
  transform: translate(-60%, -80%) scale(1.15);
}
.projectContainer:nth-of-type(even):not(.active) .thumb:nth-of-type(3) {
  transform: translate(-20%, 20%) scale(0.75);
}
.projectContainer:nth-of-type(even):not(.active) .projectInfo {
  transform: translateX(40px);
}
.projectContainer:nth-of-type(even).active .projectInfo {
  transform: translateX(-15px);
}
.projectContainer.first-of-type {
  margin-top: 80px;
}

.projectDescription > p {
  margin-bottom: 5px;
  margin-top: 0px;
}

iframe {
  border: none;
}

#projectPage {
  position: relative;
  margin: auto;
  background-color: inherit;
  opacity: 1;
  transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1) 0.35s;
  z-index: 1;
}
#projectPage.startingPosition {
  transform: translateY(50vh);
}
#projectPage a {
  text-decoration: none;
}
#projectPage #titleBlock {
  display: flex;
  padding: 50px max(50px, (100% - var(--max-project-content-width)) / 2);
  margin-top: 30px;
  border-radius: var(--border-radius);
}
#projectPage #titleBlock #projectPageTitle {
  flex: 1 1 40%;
  padding-right: 60px;
}
#projectPage #titleBlock #projectPageTitle h1 {
  line-height: 100%;
  font-weight: 600;
}
#projectPage #titleBlock #projectPageTitle h2 {
  margin-top: 5px;
  font-family: "Dona";
  font-weight: 300;
  font-style: italic;
  font-size: 23px;
  line-height: 125%;
}
#projectPage #titleBlock #projectSummary {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  flex: 1 1 60%;
  padding-left: 60px;
  border-left: 1.5px solid var(--lightbrown);
  font-weight: 200;
  font-size: 27px;
  line-height: 1.5em;
}
#projectPage #titleBlock #projectPagePieces {
  display: flex;
  gap: 20px;
}
#projectPage #titleBlock #projectPagePieces .icon {
  height: 20px;
  aspect-ratio: 1/1;
  background: var(--lightbrown);
  mask-size: cover;
  mask-position: left center;
  cursor: pointer;
}

h1 {
  font-family: "Dona";
  font-weight: 500;
  color: var(--red);
  margin-top: 0em;
  margin-bottom: 0em;
  line-height: 125%;
}

.role-issues {
  /* display: flex; */
  background: #f8f8f8;
  padding: 20px 0;
}
.role-issues > div {
  flex: 50%;
  margin: 20px 40px;
  /* background: #f5f5f5; */
}

.textb {
  font-weight: 200;
  line-height: 1.5em;
  padding: 0 100px;
}
.textb .textb b {
  font-weight: 500;
  display: block;
  color: var(--portfolioColour);
  margin: 15px 0;
}
.textb ul {
  padding: 0px 70px;
  box-sizing: border-box;
}
.textb li {
  margin: 25px 0;
  line-height: 150%;
}
.textb li span {
  font-family: "Dona";
  font-weight: 500;
  font-style: italic;
}
.textb .prototypeLink {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 20px 15px;
  margin: 0 12.5%;
  background: var(--portfolioColour);
  font-size: 23px;
  font-family: "Dona";
  font-weight: 500;
  color: white;
  overflow: hidden;
  border-radius: 20px;
  transition: background 0.1s;
}
.textb .prototypeLink:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: var(--lightbrown);
  transition: opacity 0.1s ease-in-out;
}
.textb .prototypeLink:hover:after {
  opacity: 0.1;
}

.imageb, .mergedb {
  --portfolio-flex-gap: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--portfolio-flex-gap);
}
.imageb div, .mergedb div {
  display: flex;
  flex: 0 1 calc(100% / var(--portfolio-items-per-row) - (var(--portfolio-items-per-row) - 1) / var(--portfolio-items-per-row) * var(--portfolio-flex-gap));
  gap: inherit;
  text-align: center;
}
.imageb div:first-child, .mergedb div:first-child {
  padding-top: 0;
}
.imageb div:last-child, .mergedb div:last-child {
  padding-bottom: 0;
}
.imageb div.flex-one, .mergedb div.flex-one {
  --portfolio-items-per-row: 1;
}
.imageb div.flex-two, .mergedb div.flex-two {
  --portfolio-items-per-row: 2;
}
.imageb div.flex-three, .mergedb div.flex-three {
  --portfolio-items-per-row: 3;
}
.imageb div.flex-four, .mergedb div.flex-four {
  --portfolio-items-per-row: 4;
}
.imageb div.flex-und img, .imageb div.flex-und video, .mergedb div.flex-und img, .mergedb div.flex-und video {
  max-height: 200px;
}
.imageb div.flex-one, .imageb div.flex-two, .imageb div.flex-three, .imageb div.flex-four, .mergedb div.flex-one, .mergedb div.flex-two, .mergedb div.flex-three, .mergedb div.flex-four {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--portfolio-flex-gap);
  margin-bottom: 0;
  box-sizing: border-box;
  text-align: left;
}
.imageb div.flex-one img, .imageb div.flex-one video, .imageb div.flex-two img, .imageb div.flex-two video, .imageb div.flex-three img, .imageb div.flex-three video, .imageb div.flex-four img, .imageb div.flex-four video, .mergedb div.flex-one img, .mergedb div.flex-one video, .mergedb div.flex-two img, .mergedb div.flex-two video, .mergedb div.flex-three img, .mergedb div.flex-three video, .mergedb div.flex-four img, .mergedb div.flex-four video {
  width: 100%;
}
.imageb div.flex-one p, .imageb div.flex-one h4, .imageb div.flex-two p, .imageb div.flex-two h4, .imageb div.flex-three p, .imageb div.flex-three h4, .imageb div.flex-four p, .imageb div.flex-four h4, .mergedb div.flex-one p, .mergedb div.flex-one h4, .mergedb div.flex-two p, .mergedb div.flex-two h4, .mergedb div.flex-three p, .mergedb div.flex-three h4, .mergedb div.flex-four p, .mergedb div.flex-four h4 {
  margin: 0 40px;
  margin-bottom: 0.5em;
}
@media (max-width: 768px) {
  .imageb, .mergedb {
    --portfolio-flex-gap: 20px;
    margin: 0;
    padding: 0 7.5px;
  }
}

#projectPageInfo {
  padding-bottom: 100px;
}
#projectPageInfo section {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 80px max(50px, (100% - var(--max-project-content-width)) / 2);
}
#projectPageInfo section:nth-child(even) {
  background: color-mix(in srgb, var(--lightbrown) 7%, transparent);
  border-radius: var(--border-radius);
}
#projectPageInfo p {
  font-size: 23px;
  font-weight: 200;
  line-height: 150%;
}
#projectPageInfo .sectionHeading {
  display: block;
  margin-bottom: 40px;
}
#projectPageInfo .sectionHeading h2 {
  margin-block-start: 0;
  margin-bottom: 15px;
  font-size: 48px;
  font-family: Dona;
  font-weight: 600;
  font-style: italic;
  line-height: 100%;
  text-align: center;
  color: var(--portfolioColour);
}
#projectPageInfo .sectionHeading h3 {
  margin: 0;
  margin-bottom: 15px;
  font-size: 23px;
  font-weight: 200;
  line-height: 125%;
  text-align: center;
}
#projectPageInfo .sectionHeading:after {
  content: "";
  display: block;
  width: 120px;
  height: 1.5px;
  margin: 25px auto 0 auto;
  background: var(--lightbrown);
}
#projectPageInfo h4 {
  font-size: 27px;
  font-family: Dona;
  font-weight: 600;
  font-style: italic;
  color: var(--portfolioColour);
}
#projectPageInfo .blockContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}
#projectPageInfo .blockContainer .block {
  flex: 1 1 44%;
  border-radius: var(--border-radius);
  border: 1px solid var(--portfolioColour);
  padding: 40px 30px;
  box-sizing: border-box;
  box-shadow: rgba(137, 115, 96, 0.15) 0 6px 10px;
}
#projectPageInfo .blockContainer .block span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75em;
}
#projectPageInfo .blockContainer .block h4 {
  font-size: 23px;
  margin: 0;
}
#projectPageInfo .blockContainer .block .blocksIcon {
  background-color: var(--portfolioColour);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  height: 30px;
  width: 30px;
  display: inline-block;
  padding: 0;
}
#projectPageInfo .blockContainer .block em {
  color: var(--portfolioColour);
  font-weight: 500;
}
#projectPageInfo img {
  cursor: zoom-in;
  box-sizing: border-box;
  display: block;
  border-radius: var(--border-radius);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
#projectPageInfo img:not(.noZoom):hover {
  transform: scale(1.02);
}
#projectPageInfo .transparent img, #projectPageInfo .transparent video {
  border-radius: 0px;
}
#projectPageInfo .video {
  width: 100%;
  margin-bottom: -4px;
  border-radius: var(--border-radius);
}
#projectPageInfo img.one {
  width: 100%;
}
#projectPageInfo img.two, #projectPageInfo video.two, #projectPageInfo div.two {
  width: 50%;
  display: inline-block;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: -4px;
}
#projectPageInfo img.three, #projectPageInfo video.three {
  width: 33.333333%;
  display: inline-block;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: -4px;
}
#projectPageInfo .withBackground {
  position: relative;
  padding: 50px;
  background: color-mix(in srgb, var(--lightbrown) 7%, transparent);
  border-radius: var(--border-radius);
  overflow: hidden;
}
#projectPageInfo .withGrid {
  position: relative;
  padding: 50px;
  border-radius: var(--border-radius);
  overflow: hidden;
}
#projectPageInfo .withGrid > * {
  position: relative;
  z-index: 1;
}
#projectPageInfo .withGrid:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, var(--lightbrown) 0%, var(--lightbrown) 100%), linear-gradient(135deg, white 45%, #303030 50%, white 55%), url(../imgs/dotgrid-1.png), linear-gradient(45deg, white, white);
  background-size: 100%, 300%, 44px;
  background-blend-mode: lighten, color-dodge, normal;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.25) 55%);
  mask-size: 300%;
  mask-type: alpha;
  animation: gradient-wipe 6s linear infinite;
}
@keyframes gradient-wipe {
  from {
    background-position: 0, 100%, 0;
    mask-position: 100%;
  }
  to {
    background-position: 0, 0%, 0;
    mask-position: 0%;
  }
}
#projectPageInfo .ended:after {
  content: url("data:image/svg+xml,%3Csvg width='51' height='52' viewBox='0 0 41 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99294 26.3022C9.78043 33.5163 17.8883 37.1048 25.1024 34.3173C32.3165 31.5298 35.905 23.4219 33.1175 16.2078C30.33 8.99369 22.2221 5.40522 15.008 8.19271' stroke='white' stroke-width='5'/%3E%3Cpath d='M13.3945 0.611816L2.71497 13.4287L19.2276 15.8075L13.3945 0.611816Z' fill='white'/%3E%3C/svg%3E%0A");
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#projectPageInfo .ended:hover:after {
  opacity: 0.8;
  transform: rotate(-45deg);
  cursor: pointer;
}

.fadeCarousel {
  margin: 15px 0;
}

.carouselControls {
  display: flex;
  padding: 0;
  margin: 15px 50px;
}

.carouselControls li {
  display: block;
  flex: 1 1 0px;
  background-color: white;
  border: 2px solid #f5f5f5;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  padding: 20px 0;
  transition: background-color 0.15s, box-shadow 0.15s;
}

.carouselControls li.selected {
  background-color: #f5f5f5;
}

.carouselControls li:hover {
  background-color: #f0f0f0;
}

.carouselControls li:not(:last-of-type) {
  margin-right: 15px;
}

.carouselContent {
  position: relative;
  padding: 0 50px;
}

.carouselContent > * {
  display: none;
  opacity: 0;
  transition: opacity 0.35s;
}

#bars {
  position: absolute;
  width: 400px;
  aspect-ratio: 1/1;
  filter: drop-shadow(0 0 2px rgba(137, 115, 96, 0.15));
}
#bars rect {
  height: 100%;
  transform-origin: center;
  transform-box: content-box;
}
#bars.in rect {
  animation: grow 0.33s ease forwards;
  transform: translateY(-100%);
}
#bars.out-forward rect {
  animation: shrink-forward 0.5s ease forwards;
  animation-delay: 0s !important;
}
#bars.out-backward rect {
  animation: shrink-backward 0.5s ease forwards;
  animation-delay: 0s;
}
@keyframes grow {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes shrink-forward {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes shrink-backward {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

/*-------------------------------------------------------------
	Project specific modifications
---------------------------------------------------------------*/
body[data-viewing=HumanizingtheMegascale] #hero .headerBar .logo {
  background: #8c8c8c;
}

body[data-viewing=HumanizingtheMegascale] #hero .headerBar .buttons {
  color: #8c8c8c;
}

body[data-viewing=Longplay] .heroLogo {
  mix-blend-mode: hard-light;
}

body[data-viewing=Vincenzos] .heroLogo div {
  height: 100%;
  width: 100%;
}

/*body[data-viewing="BlokusUltra"] #hero .headerBar .logo {
	background: linear-gradient(to right, rgb(26, 172, 141) 0%, rgb(27, 173, 142) 35%, rgb(255, 255, 255) 36%, rgb(255, 255, 255) 100%);
}

body[data-viewing="HumanizingtheMegascale"] .heroLogo{
	mix-blend-mode: multiply;
}

body[data-viewing="Vincenzos"] #hero .headerBar .logo {
	background: rgb(105, 87, 75);
}
body[data-viewing="Vincenzos"] #hero .headerBar .buttons{
	color: rgb(105, 87, 75);
}

body[data-viewing="Focus"] #hero .headerBar .logo {
	background: rgb(231, 232, 233);
}
body[data-viewing="Focus"] #hero .headerBar .buttons{
	color: rgb(231, 232, 233);
}*/
body[data-viewing=MappedinWeb] #hero .heroComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/MappedinWeb/herobg-1.png);
}
body[data-viewing=MappedinWeb] #mappedin-icons {
  background-size: cover;
  animation: mappedin-icons 15s linear infinite;
  aspect-ratio: 1/1;
}
body[data-viewing=MappedinWeb] #mappedin-icons img {
  height: auto;
  width: 50%;
}

body[data-viewing=DigitalDirectory] #hero .heroComponent {
  transform-origin: 69% 50%;
}
body[data-viewing=DigitalDirectory] #hero .heroComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/DigitalDirectory/herobg-1.png);
}
body[data-viewing=DigitalDirectory] video {
  mask-image: url(../imgs/portfolio/DigitalDirectory/DirectoryMockup-mask.png);
  mask-size: cover;
}

body[data-viewing=AlertLabs] #hero .heroComponent {
  transform-origin: 75% 50%;
}
body[data-viewing=AlertLabs] #hero .heroComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/AlertLabs/herobg-1.png);
}
body[data-viewing=AlertLabs] #hero .heroComponent:nth-child(3) {
  background-image: url(../imgs/portfolio/AlertLabs/herobg-2.png);
}

body[data-viewing=SpyderControlSuite] #hero .heroComponent {
  transform-origin: 75% 50%;
}
body[data-viewing=SpyderControlSuite] #hero .heroComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/SpyderControlSuite/herobg-1.png);
}
body[data-viewing=SpyderControlSuite] #hero .heroComponent:nth-child(3) {
  background-image: url(../imgs/portfolio/SpyderControlSuite/herobg-2.png);
}

body[data-viewing=CineLife] #hero .heroComponent {
  transform-origin: 75% 50%;
}
body[data-viewing=CineLife] #hero .heroComponent:nth-child(2) {
  background-image: url(../imgs/portfolio/CineLife/herobg-1.png);
}
body[data-viewing=CineLife] #hero .heroComponent:nth-child(3) {
  background-image: url(../imgs/portfolio/CineLife/herobg-2.png);
}

@keyframes mappedin-icons {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 610% 0;
  }
}
/*-------------------------------------------------------------
	Animations
---------------------------------------------------------------*/
.ui-tooltip {
  position: absolute;
  padding: 10px 15px;
  font-family: "Agenda";
  font-weight: 200;
  line-height: 100%;
  color: var(--lightbrown);
  background-color: var(--tan);
  box-shadow: 0 2px 6px rgba(137, 115, 96, 0.4);
  border-radius: var(--border-radius);
  cursor: pointer;
  z-index: 9999;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#highlight {
  position: absolute;
  box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0);
  z-index: 50;
  pointer-events: none;
  transition: box-shadow 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#highlight.active {
  box-shadow: inset 0px 0px 80px 30px rgb(255, 255, 255);
  pointer-events: none;
}

@media (min-width: 1366px) {
  :root {
    --max-project-content-width: 1100px;
  }
  h1 {
    font-size: 48px;
  }
  .textb {
    font-size: 23px;
  }
  .textb .blockContainer {
    font-size: 21px;
  }
  #gallery {
    padding: 0 220px;
  }
  .bio #gallery {
    padding-top: 0;
  }
  table.fixed {
    height: 80px;
  }
}
@media (min-width: 768px) {
  body:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    box-shadow: inset 0 -30px 350px 300px rgba(0, 0, 0, 0.21);
    filter: url(#noise2);
    pointer-events: none;
  }
  .thumb:first-child:nth-last-child(n+3),
  .thumb:first-child:nth-last-child(n+3) ~ .thumb {
    --thumbs-per-row: 2;
  }
  body[data-portOpen=true] .headerBar {
    padding: 0 65px;
  }
  body[data-portOpen=true] .headerBar.tall {
    height: 150px;
  }
  body[data-portOpen=true] #hero .headerBar {
    padding: 0 35px;
  }
  body[data-portOpen=true] #hero .headerBar.tall {
    height: 100px;
  }
  body[data-portOpen=true] #hero .headerBar.tall:before {
    transform: translateY(-100%);
  }
  body:not(.bio) #introMessage {
    opacity: 0;
    transform: translateY(-50%);
  }
}
@media (min-width: 768px) and (max-width: 1366px) {
  :root {
    --hero-height: 450px;
  }
  .headerBar {
    padding: 0 40px;
  }
  #intro {
    background-size: 100% 100%;
  }
  #intro #introMessage {
    padding: 0 40px;
  }
  #intro #introMessage:after {
    transform: translate(-35%, 60%);
  }
  #gallery {
    --flex-gap: 40px;
    padding: 0 40px;
  }
  .portfolioWrapper {
    --items-per-row: 2;
  }
  .portfolioWrapper[data-flags=pinned] .portfolioHero:after {
    aspect-ratio: 1.4/1 !important;
  }
  #hero .headerBar {
    padding: 0 10px;
  }
  .spacer.vertical {
    height: 100px;
    margin: 0px 30px;
  }
  #projectPageInfo img.one {
    padding: 5px 0px;
  }
  #projectPageInfo img.two {
    padding: 5px;
  }
  table.fixed {
    height: 80px;
  }
}
@media (min-width: 1367px) and (max-width: 1536px) {
  .headerBar {
    padding: 0 40px;
  }
  #gallery {
    padding: 0 175px;
  }
}
@media (min-width: 1025px) {
  #featuredProjects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .portfolioWrapper[data-layout=vertical] {
    grid-row-end: span 2;
  }
  .portfolioWrapper[data-layout=vertical] .portfolioContainer {
    grid-template-rows: 1fr;
  }
  .portfolioWrapper[data-layout=vertical] .portfolioContainer .portfolioHero {
    aspect-ratio: unset;
  }
  .portfolioWrapper[data-layout=horizontal] {
    grid-column-end: span 2;
  }
  .portfolioWrapper[data-layout=horizontal] .portfolioContainer {
    grid-template-columns: 50% 50%;
  }
  .portfolioWrapper[data-layout=horizontal] .portfolioContainer .portfolioHero {
    /*setting height + width necessary to allow aspect ratio to grow*/
    height: 100%;
    width: 100%;
    aspect-ratio: var(--bento-row-height);
  }
  .portfolioWrapper[data-layout=horizontal-reverse] {
    grid-column-end: span 2;
  }
  .portfolioWrapper[data-layout=horizontal-reverse] .portfolioContainer {
    grid-template-columns: 50% 50%;
    justify-content: end;
  }
  .portfolioWrapper[data-layout=horizontal-reverse] .portfolioContainer .portfolioHero {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--bento-row-height);
  }
  .portfolioWrapper[data-layout=horizontal-reverse] .portfolioContainer .portfolioInfo {
    grid-row: 1;
  }
  .portfolioWrapper[data-layout=single] {
    grid-column-end: span 1;
  }
  .portfolioWrapper[data-layout=single] .portfolioContainer {
    grid-template-rows: 1fr;
  }
  .portfolioWrapper[data-layout=single] .portfolioContainer .portfolioHero {
    aspect-ratio: unset;
  }
  div:not(#animationContainer) .portfolioWrapper[data-layout=single] .portfolioContainer .portfolioHero .frontComponentsContainer .frontComponent {
    width: 100%;
    height: unset;
  }
  .portfolioWrapper .portfolioContainer {
    display: grid;
  }
}
@media (max-width: 1024px) {
  :root {
    --bento-row-height: 2/1;
  }
  .portfolioHero {
    aspect-ratio: var(--bento-row-height);
  }
  #projectPage #projectPageInfo .textb {
    padding: 0 50px;
  }
}
@media (max-width: 768px) {
  :root {
    --hero-height: 400px;
  }
  body {
    padding-bottom: 0;
    font-size: 18px;
    transition: transform 0.25s ease-out;
  }
  body[data-navOpen=true] {
    height: 100vh;
    overflow: hidden;
    transform: translateX(-60%);
  }
  body[data-navOpen=true]:after {
    opacity: 0.8;
    pointer-events: all;
  }
  body:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--tan);
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.5s;
  }
  .headerBar {
    justify-content: space-between;
    height: 90px;
    padding: 0 30px;
    clip-path: none;
  }
  .headerBar .navContainer {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: fixed;
    width: 60vw;
    height: 100vh;
    right: 0;
    padding: 30px;
    background: var(--tan);
    border: none;
    box-sizing: border-box;
    box-shadow: inset 25px 0 22px -25px rgba(137, 115, 96, 0.4);
    transform: translateX(100%);
    transition: transform 0.5s ease-out;
  }
  .headerBar .navContainer .navigation {
    flex-direction: column;
  }
  .headerBar .spinningCat {
    display: none;
  }
  .headerBar .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .headerBar .hamburger svg path {
    stroke: var(--lightbrown);
  }
  body[data-portOpen=true] > .headerBar {
    z-index: 3;
    margin: 15px;
    left: 0;
    right: 0;
    width: auto;
  }
  body[data-portOpen=true] > .headerBar.tall {
    transform: translateY(-120%);
  }
  body[data-portOpen=true] > .headerBar:before {
    display: block;
  }
  #intro {
    height: 380px;
    background-size: 150% 100%;
  }
  #intro #introMessage {
    padding: 0 30px;
    font-size: 23px;
  }
  #intro #introMessage:after {
    transform: translate(-25%, 80%);
  }
  #intro #introAnim .loadingBar {
    display: none;
  }
  #intro #introAnim .logoColorFront {
    mask-size: 100% auto;
  }
  #intro #introAnim .logoColorBack {
    mask-size: 100% auto;
  }
  #gallery {
    --flex-gap: 50px;
    transform: translateY(200px);
  }
  .portfolioWrapper {
    --items-per-row: 1;
    margin-top: 0;
  }
  .portfolioWrapper .portfolioContainer .portfolioInfo {
    padding: 24px;
  }
  .portfolioWrapper .portfolioContainer .portfolioInfo .projectTitle {
    font-size: 23px;
  }
  .portfolioWrapper .portfolioContainer .portfolioInfo .descriptiveTag {
    font-size: 18px;
  }
  .portfolioWrapper .portfolioContainer .portfolioInfo .projectSummary {
    font-size: 18px;
  }
  .portfolioWrapper .portfolioContainer .portfolioInfo .projectCompanyLogo {
    position: absolute;
    top: 20px;
    background: var(--tan);
    transform: scale(0.9);
    transform-origin: top left;
  }
  .portfolioWrapper[data-flags=pinned] {
    --items-per-row: 1;
  }
  .projectContainer {
    align-items: normal;
    flex-wrap: wrap;
  }
  .projectContainer .projectMedia {
    flex: 0 0 65%;
    max-height: none;
  }
  .projectContainer .projectMedia .thumb {
    pointer-events: none;
  }
  .projectContainer .projectMedia .thumb:nth-of-type(1) ~ .thumb {
    display: none;
  }
  .projectContainer .projectInfo {
    flex: 1;
  }
  .projectContainer .projectInfo .projectInnerMedia {
    --inner-thumb-gap: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inner-thumb-gap);
    padding-top: var(--inner-thumb-gap);
  }
  .projectContainer .projectInfo .projectInnerMedia .thumb {
    --inner-thumbs-per-row: 2;
    position: relative;
    flex: 0 1 calc(100% / var(--inner-thumbs-per-row) - (var(--inner-thumbs-per-row) - 1) / var(--inner-thumbs-per-row) * var(--inner-thumb-gap));
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    border-radius: 15px !important;
    transition-delay: 0s !important;
    transform: none !important;
  }
  .projectContainer:nth-of-type(even):not(.active) .projectInfo, .projectContainer:nth-of-type(odd):not(.active) .projectInfo {
    transform: none;
  }
  .projectContainer:nth-of-type(even).active .projectMedia .thumb:first-of-type:before, .projectContainer:nth-of-type(odd).active .projectMedia .thumb:first-of-type:before {
    opacity: 1;
  }
  .projectContainer:nth-of-type(even).active .projectMedia .thumb:first-of-type:after, .projectContainer:nth-of-type(odd).active .projectMedia .thumb:first-of-type:after {
    opacity: 0.6;
  }
  .projectContainer:nth-of-type(even).active .projectInfo, .projectContainer:nth-of-type(odd).active .projectInfo {
    transform: none;
  }
  .projectContainer:nth-of-type(even).active .projectInfo .projectDescription, .projectContainer:nth-of-type(odd).active .projectInfo .projectDescription {
    max-height: 1100px;
  }
  .projectContainer:nth-of-type(odd) {
    align-items: flex-start;
  }
  .projectContainer:nth-of-type(odd) .projectMedia:not(.active) .thumb:nth-of-type(1), .projectContainer:nth-of-type(odd) .projectMedia.active .thumb:nth-of-type(1) {
    transform: translate(-15px, 25px) !important;
    border-radius: 15px !important;
  }
  .projectContainer:nth-of-type(even) {
    align-items: flex-end;
  }
  .projectContainer:nth-of-type(even) .projectMedia:not(.active) .thumb:nth-of-type(1), .projectContainer:nth-of-type(even) .projectMedia.active .thumb:nth-of-type(1) {
    transform: translate(15px, 25px) !important;
    border-radius: 15px !important;
  }
  .projectContainer.first-of-type {
    margin-top: -20px !important;
  }
  #aboutPanel {
    padding-top: 60px;
  }
  #aboutPanel p {
    font-size: 16px;
  }
  #portfolioViewer {
    padding: 15px 15px;
  }
  #gallery, #Projects {
    padding-top: 60px;
    padding-left: 30px;
    padding-right: 30px;
  }
  table.fixed {
    height: 60px;
  }
  #header {
    height: 60px;
    padding-top: 0px;
  }
  span.buttons {
    /*font-size:24px;*/
  }
  #hero {
    position: relative;
    padding-bottom: 0 !important;
  }
  #hero .headerBar {
    top: 5px;
    padding: 0 15px;
  }
  #hero .headerBar:before {
    background: none;
  }
  #hero .heroLayer {
    height: 100%;
    top: 0px;
  }
  #hero .heroLogo div {
    width: 60%;
  }
  #projectPage #titleBlock {
    flex-direction: column;
    padding: 35px;
    border: 1.5px solid var(--lightbrown);
  }
  #projectPage #titleBlock #projectPageTitle {
    padding-right: 0;
  }
  #projectPage #titleBlock #projectPageTitle h1 {
    font-size: 36px;
  }
  #projectPage #titleBlock #projectPageTitle h2 {
    font-size: 18px;
  }
  #projectPage #titleBlock #projectSummary {
    padding-left: 0;
    padding-top: 30px;
    font-size: 21px;
    border-left: none;
    border-top: 1.5px solid var(--lightbrown);
  }
  #projectPage #projectPageInfo {
    padding-bottom: 60px;
    margin-top: 25px;
  }
  #projectPage #projectPageInfo section {
    gap: 20px;
    padding: 25px 0;
  }
  #projectPage #projectPageInfo .textb {
    padding: 0 25px;
  }
  #projectPage #projectPageInfo .blockContainer {
    gap: 25px;
  }
  #projectPage #projectPageInfo .blockContainer .block {
    padding: 25px;
  }
  #projectPage #projectPageInfo .blockContainer .block h4 {
    font-size: 21px;
  }
  #projectPage #projectPageInfo .blockContainer .block .blocksIcon {
    height: 25px;
    width: 25px;
  }
  #projectPage #projectPageInfo p {
    margin: 0.5em 0;
    font-size: 18px;
  }
  #projectPage #projectPageInfo ul {
    padding: 0 20px;
  }
  #projectPage #projectPageInfo h2 {
    font-size: 36px;
  }
  #projectPage #projectPageInfo h4 {
    font-size: 23px;
  }
  #projectPage #projectPageInfo .blockContainer {
    flex-direction: column;
  }
  #projectPage #projectPageInfo .withBackground, #projectPage #projectPageInfo .withGrid {
    padding: 15px;
  }
  .imageb {
    font-size: 16px;
  }
  .imageb div.flex-one, .imageb div.flex-two, .imageb div.flex-three {
    --portfolio-items-per-row: 1;
    padding: 7.5px;
  }
  .imageb div.flex-four {
    --portfolio-items-per-row: 2;
    padding: 7.5px;
  }
  .carouselControls {
    margin: 15px;
    flex-wrap: wrap;
  }
  .carouselControls li {
    flex: 1 1 30%;
    margin: 10px;
  }
  #projectPageInfo img.one {
    padding: 3px 0px;
  }
  #projectPageInfo img.two {
    padding: 3px;
  }
}

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