html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: "PleinBold";
  src: url("../../font/Plein-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "PleinMedium";
  src: url("../../font/Plein-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "PleinRegular";
  src: url("../../font/Plein-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  src: url("../../font/Switzer-Regular.woff2") format("woff2");
}
h1, h2, h3, .line span {
  font-family: "PleinBold", sans-serif;
  color: #121212;
  letter-spacing: -1px;
  line-height: 100%;
}

h1 {
  font-size: 64px;
}

h2, .line span {
  font-size: 40px;
}

h3 {
  font-size: 32px;
}

a {
  font-size: 14px;
  letter-spacing: 0.2px;
  line-height: 100%;
}

.button {
  font-size: 16px;
  font-weight: 550;
}

.metricHeading {
  font-size: 84px;
  font-family: "PleinMedium", sans-serif;
  line-height: 100%;
  letter-spacing: -1px;
  color: #121212;
  margin-bottom: 8px;
}

span {
  font-family: "PleinRegular", sans-serif;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  color: #4a4a4a;
}

a, button {
  font-family: "PleinMedium", sans-serif;
  line-height: 100%;
  color: #2f6f6a;
}

p, li {
  font-family: "Switzer", serif;
  color: #4a4a4a;
  letter-spacing: 0.5px;
  line-height: 150%;
}

menu, nav, ul {
  margin: 0;
  padding: 0;
}

.btnexplore {
  color: #2f6f6a;
  vertical-align: text-bottom;
  padding-left: 5px;
  position: relative;
  top: 3px;
}

.tags {
  padding: 6px 8px;
  background-color: #e9eded;
  margin-right: 8px;
}

@media (min-width: 1440px) {
  a {
    font-size: 16px;
  }
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul {
  list-style-type: none;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html {
  overflow-x: hidden;
}

span,
a,
a:visited,
a:focus,
a:target {
  text-decoration: none;
}

#mobileMenu {
  display: block;
  position: fixed;
  top: 0;
  width: 110%;
  height: 100vh;
  z-index: 3;
  overflow-y: scroll;
  right: -110vw;
}
#mobileMenu menu {
  list-style: none;
  text-decoration: none;
  padding: 10px 10px 30px 50px;
  margin: 0px;
  position: relative;
  top: 100px;
}
#mobileMenu menu ul {
  list-style: none;
  text-decoration: none;
  padding: 0px;
  margin: 0px;
  text-align: center;
}
#mobileMenu menu ul a {
  color: #fff;
  font-size: 18px;
}
#mobileMenu menu ul a:hover {
  color: #121212;
}
#mobileMenu menu ul hr {
  margin: 9px auto;
  border-color: #121212;
  width: 30px;
}
#mobileMenu.openMenu {
  right: -4vw;
}

.hamburger-icon {
  position: absolute;
  right: 10px;
  top: 35px;
  cursor: pointer;
  z-index: 10;
}

@media screen and (min-width: 1024px) {
  #mainNav {
    display: flex;
  }
  .hamburger-icon {
    display: none;
  }
  #mobileMenu {
    display: none;
  }
}
html.menuoverflow {
  overflow-y: hidden;
}

body {
  overflow-x: hidden;
  background: linear-gradient(to bottom, #F7F9F9, #F1F9F8);
  padding: 32px 40px;
}

/* LANDING */
#topBar {
  background: #F7F9F9;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  gap: 61px;
  padding: 16px 40px;
  z-index: 100;
  animation: topBarIn 0.55s ease-out forwards;
  animation-delay: 0.05s;
}
#topBar #homeNav {
  font-family: "Switzer", serif;
  color: #121212;
  letter-spacing: -1px;
  line-height: 100%;
  font-size: 20px;
}
#topBar #homeNav:hover {
  color: #2f6f6a;
}
#topBar #mainNav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 32px;
}
#topBar #contactBTN {
  margin-left: auto;
  padding: 12px 24px;
  border: 2px solid #2f6f6a;
  color: #2f6f6a;
}
#topBar #contactBTN:hover {
  color: #fff;
  background-color: #2f6f6a;
}
#topBar #navArrow {
  opacity: 0;
  color: #2f6f6a;
  vertical-align: text-bottom;
  padding-left: 2px;
  position: relative;
  top: 0px;
  font-size: 18px;
}
#topBar .navItems a {
  position: relative;
  font-family: "PleinRegular", sans-serif;
  color: #121212;
  text-decoration: none;
}
#topBar .navItems a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: #2f6f6a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}
#topBar .navItems a:hover {
  color: #2f6f6a;
}
#topBar .navItems a:hover #navArrow {
  opacity: 1;
}
#topBar .navItems a:hover:after {
  transform: scaleX(1);
}

header {
  width: -webkit-fill-available;
  text-align: center;
  margin: 140px auto 64px;
}
header h1 {
  margin-bottom: 24px;
  animation: header1In 0.6s ease-out forwards;
  animation-delay: 0.05s;
}
header p {
  margin-bottom: 32px;
  animation: headerPIn 0.3s ease-out forwards;
  animation-delay: 0.05s;
}
header a {
  padding: 12px 24px;
  background-color: #2f6f6a;
  color: #fff;
  animation: headerAIn 0.2s ease-out forwards;
  animation-delay: 0.05s;
}
header a:hover {
  background-color: #1E4844;
}

#headerImages {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 16px;
  left: 5px;
  margin-bottom: 255px;
}
#headerImages img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top left;
     object-position: top left;
  box-shadow: 0 8px 18px 0 rgba(54, 43, 38, 0.08);
}
#headerImages > img {
  opacity: 0;
}
#headerImages > img:first-of-type, #headerImages > img:last-of-type {
  width: 198px;
  height: 432px;
  animation: headerIMG1In 0.8s ease-out forwards;
  animation-delay: 0.3s;
}
#headerImages > img:nth-of-type(2) {
  width: 518px;
  height: 724px;
  animation: headerIMG1In 0.8s ease-out forwards;
  animation-delay: 0.05s;
}
#headerImages > img:nth-of-type(2) {
  -o-object-position: 51% 7%;
     object-position: 51% 7%;
}
#headerImages > img:last-of-type {
  -o-object-position: 100% 0%;
     object-position: 100% 0%;
}
#headerImages div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
#headerImages #headerImagesCont1 {
  opacity: 0;
  animation: headerIMG1In 0.8s ease-out forwards;
  animation-delay: 0.2s;
}
#headerImages #headerImagesCont1 img:first-of-type {
  width: 260px;
  height: 260px;
  -o-object-position: 85% 0%;
     object-position: 85% 0%;
}
#headerImages #headerImagesCont1 img:last-of-type {
  width: 260px;
  height: 346px;
  -o-object-position: 5% 0%;
     object-position: 5% 0%;
}
#headerImages #headerImagesCont2 {
  opacity: 0;
  animation: headerIMG1In 0.8s ease-out forwards;
  animation-delay: 0.2s;
}
#headerImages #headerImagesCont2 img:first-of-type {
  width: 260px;
  height: 346px;
  -o-object-position: 0% 101%;
     object-position: 0% 101%;
}
#headerImages #headerImagesCont2 img:last-of-type {
  width: 260px;
  height: 260px;
}

#aboutSection {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  margin-bottom: 255px;
  scroll-margin-top: 255px;
}
#aboutSection h2 {
  margin-bottom: 32px;
}
#aboutSection #aboutDesc {
  width: 616px;
}
#aboutSection #aboutH2 .line {
  display: block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
}
#aboutSection #metrics {
  width: 540px;
}
#aboutSection #metrics #metricsTop, #aboutSection #metrics #metricsBottom {
  display: flex;
  flex-direction: row;
  gap: 32px;
}
#aboutSection #metrics #metricsTop {
  margin-bottom: 48px;
}
#aboutSection #metrics .metricItem {
  width: 254px;
  height: 119px;
  padding-left: 32px;
  border-left: 1px solid #2f6f6a;
}

#clientProject {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 255px;
  scroll-margin-top: 255px;
}
#clientProject #clientproCont {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
}
#clientProject #clientproCont #cliProleft, #clientProject #clientproCont #cliProright {
  width: 50%;
}
#clientProject #clientproCont h2 {
  margin-bottom: 24px;
}
#clientProject #cliProimages {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  align-content: flex-start;
  align-items: flex-start;
}
#clientProject #cliProimages img {
  position: relative;
  -o-object-fit: contain;
     object-fit: contain;
  box-shadow: 0 8px 18px 0 rgba(54, 43, 38, 0.08);
}
#clientProject #cliProimages img:first-of-type {
  width: -webkit-fill-available;
}
#clientProject #cliProimages img:nth-of-type(2) {
  position: absolute;
  display: none;
  top: 113px;
  left: 48vw;
  height: 490px;
  width: 444px;
}
#clientProject #cliProimages img:last-of-type {
  position: absolute;
  display: none;
  height: 337px;
  width: 224px;
  top: 289px;
  left: 67vw;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
#clientProject a:hover {
  color: #1E4844;
}

#hireMe {
  position: relative;
  width: 100%;
  margin-bottom: 255px;
}
#hireMe h2 {
  margin-bottom: 24px;
}
#hireMe > p {
  margin-bottom: 80px;
}
#hireMe #hireContainer {
  position: relative;
}
#hireMe #hireTop, #hireMe #hireBottom {
  display: flex;
  flex-direction: row;
  gap: 64px;
}
#hireMe #hireTop {
  margin-bottom: 64px;
}
#hireMe .hireItem {
  position: relative;
  width: 586px;
  height: 182px;
  padding-left: 44px;
  padding-top: 28px;
  border-left: 1px solid #2f6f6a;
}
#hireMe .hireNumber {
  position: absolute;
  font-family: "PleinMedium", sans-serif;
  left: 20px;
  font-size: 164px;
  line-height: 100%;
  top: -33px;
  color: #4a4a4a;
  opacity: 10%;
}
#hireMe .hireHeading {
  margin-bottom: 16px;
}
#hireMe .hireDesc {
  font-size: 14px;
}

#recentProjects {
  scroll-margin-top: 255px;
}
#recentProjects h2 {
  text-align: center;
}

#recentProjects, #archiveProjects, #projectNextOptions {
  margin-bottom: 255px;
  overflow-x: hidden;
  overflow-y: hidden;
}
#recentProjects h2, #archiveProjects h2, #projectNextOptions h2 {
  margin-bottom: 32px;
}
#recentProjects #recProCont, #archiveProjects #recProCont, #projectNextOptions #recProCont {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-evenly;
  align-items: flex-start;
}
#recentProjects #recProCont a:hover, #archiveProjects #recProCont a:hover, #projectNextOptions #recProCont a:hover {
  color: #1E4844;
}
#recentProjects img, #archiveProjects img, #projectNextOptions img {
  max-width: 600px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 16px;
  -o-object-position: top left;
     object-position: top left;
}
#recentProjects h3, #archiveProjects h3, #projectNextOptions h3 {
  margin-top: 12px;
  margin-bottom: 8px;
}
#recentProjects p, #archiveProjects p, #projectNextOptions p {
  margin-bottom: 16px;
}
#recentProjects #recentCol1, #recentProjects #recentCol2, #recentProjects #recentCol3, #archiveProjects #recentCol1, #archiveProjects #recentCol2, #archiveProjects #recentCol3, #projectNextOptions #recentCol1, #projectNextOptions #recentCol2, #projectNextOptions #recentCol3 {
  display: flex;
  max-width: 47%;
  flex-direction: column;
  row-gap: 64px;
}
#recentProjects #recentCol1 img, #recentProjects #recentCol3 img, #archiveProjects #recentCol1 img, #archiveProjects #recentCol3 img, #projectNextOptions #recentCol1 img, #projectNextOptions #recentCol3 img {
  width: -webkit-fill-available;
  height: 327px;
}
#recentProjects #recProBig, #recentProjects .recProBig, #archiveProjects #recProBig, #archiveProjects .recProBig, #projectNextOptions #recProBig, #projectNextOptions .recProBig {
  width: -webkit-fill-available;
  height: 595px;
}
#recentProjects #recProSmall, #recentProjects .recProSmall, #archiveProjects #recProSmall, #archiveProjects .recProSmall, #projectNextOptions #recProSmall, #projectNextOptions .recProSmall {
  width: -webkit-fill-available;
  height: 327px;
  -o-object-position: 0% 20%;
     object-position: 0% 20%;
}

#recIMG2 {
  -o-object-position: 50% !important;
     object-position: 50% !important;
}

#recIMG3 {
  -o-object-fit: none !important;
     object-fit: none !important;
  -o-object-position: 1% 16% !important;
     object-position: 1% 16% !important;
}

#recIMG4 {
  height: 327px;
  -o-object-position: 50% 21% !important;
     object-position: 50% 21% !important;
}

footer {
  margin-bottom: 32px;
  padding-top: 48px;
  border-top: 1px solid rgba(74, 74, 74, 0.4);
}
footer #footerCont {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-around;
}
footer #footerDesc {
  text-align: center;
}
footer img {
  width: 96px;
  height: 96px;
  border: 2px solid grey;
  border-radius: 50%;
  margin-bottom: 24px;
}
footer h3 {
  margin-bottom: 8px;
}
footer #footerLinks {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  width: -webkit-fill-available;
  justify-content: space-between;
  padding-left: 60px;
}
footer #footerLinks div {
  text-align: center;
}
footer #footerLinks div .footerlabel {
  font-family: "PleinMedium", sans-serif;
  margin-bottom: 12px;
}
footer #footerLinks div a {
  font-size: 18px;
  display: block;
  margin-bottom: 12px;
}
footer #footerLinks div a:hover {
  color: #1E4844;
}

/* ARCHIVE */
#archiveProjects #recentCol1, #archiveProjects #recentCol2, #archiveProjects #recentCol3 {
  max-width: 389px;
}
#archiveProjects #recProCont {
  gap: 32px;
  justify-content: space-evenly;
}
#archiveProjects #recentCol1 img, #archiveProjects #recentCol2 img {
  min-width: 389px;
  max-width: 389px;
}

#arcIMG8 {
  -o-object-position: 50% 0% !important;
     object-position: 50% 0% !important;
}

#arcIMG4 {
  -o-object-fit: none !important;
     object-fit: none !important;
  -o-object-position: 3% 58% !important;
     object-position: 3% 58% !important;
}

#arcIMG12 {
  -o-object-fit: none !important;
     object-fit: none !important;
  -o-object-position: 0% 37% !important;
     object-position: 0% 37% !important;
}

#arcIMG3 {
  -o-object-position: 46% 0% !important;
     object-position: 46% 0% !important;
}

#arcIMG7 {
  -o-object-position: 38% 41% !important;
     object-position: 38% 41% !important;
}

#arcIMG6 {
  -o-object-position: 50% 0% !important;
     object-position: 50% 0% !important;
}

#arcIMG1 {
  -o-object-position: 38% 0% !important;
     object-position: 38% 0% !important;
}

#arcIMG9 {
  -o-object-position: 50% 0% !important;
     object-position: 50% 0% !important;
}

#arcIMG5 {
  -o-object-position: 50% 0% !important;
     object-position: 50% 0% !important;
}

/* PROJECT */
.projectPage header {
  margin-bottom: 96px;
}
.projectPage header h1 {
  margin-bottom: 4px;
}
.projectPage header p {
  margin-bottom: 16px;
}
.projectPage .projectHeaderImage {
  position: relative;
  left: -40px;
  width: 100vw;
  -o-object-fit: none;
     object-fit: none;
  max-height: 325px;
  -o-object-position: 50% 8%;
     object-position: 50% 8%;
  margin-bottom: 102px;
}
.projectPage .projectImages {
  width: 100%;
  max-height: 710px;
  -o-object-fit: none;
     object-fit: none;
  -o-object-position: top;
     object-position: top;
  margin-bottom: 64px;
}
.projectPage #projectColour ul {
  width: 768px;
  margin: 0 auto 32px;
  font-family: "Switzer", serif;
  color: #4a4a4a;
  letter-spacing: 0.5px;
  line-height: 150%;
  list-style-type: disc;
}
.projectPage #projectColour ul li {
  margin-left: 48px;
}
.projectPage .projectPara {
  max-width: 768px;
  margin: 0 auto 64px;
}
.projectPage #projectDesc {
  position: relative;
}
.projectPage #projectDesc .projectSpanCont {
  max-width: 768px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
}
.projectPage #projectDesc .projectSpanCont .projectSpan {
  color: #121212;
  font-family: "PleinMedium", sans-serif;
}
.projectPage .projectimgCont2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 32px;
       column-gap: 32px;
}
.projectPage .projectimgCont2 .projectImages {
  -o-object-fit: contain;
     object-fit: contain;
}
.projectPage .projectimgCont5 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 32px;
  align-items: center;
}
.projectPage .projectimgCont5 .projectImages {
  margin-bottom: 0px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.projectPage .projectimgCont5 .projectImages:first-of-type {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  height: 100%;
}
.projectPage #projectTypo {
  margin-bottom: 64px;
}
.projectPage #projectTypo ul {
  width: 768px;
  margin: 0 auto 32px;
  font-family: "Switzer", serif;
  color: #4a4a4a;
  letter-spacing: 0.5px;
  line-height: 150%;
  list-style-type: disc;
}
.projectPage #projectTypo ul li {
  margin-left: 48px;
}
.projectPage #projectPattern {
  margin-bottom: 255px;
}
.projectPage #projectPattern .projectPara {
  margin-bottom: 24px;
}
.projectPage #projectPattern ul {
  width: 768px;
  margin: 0 auto 32px;
  font-family: "Switzer", serif;
  color: #4a4a4a;
  letter-spacing: 0.5px;
  line-height: 150%;
  list-style-type: disc;
}
.projectPage #projectPattern ul li {
  margin-left: 48px;
}
.projectPage #NextGridWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(387px, 387px));
  grid-auto-flow: row;
  justify-content: space-evenly;
}
.projectPage #NextGridWrapper .recProCard {
  height: -moz-fit-content;
  height: fit-content;
}
.projectPage #NextGridWrapper #recProSmall {
  height: 327px;
  width: 100%;
  min-width: auto;
}
.projectPage #NextGridWrapper .nextChoice {
  font-family: "PleinBold", sans-serif;
  color: #4a4a4a;
  text-align: center;
  margin-bottom: 8px;
  font-size: 24px;
}
.projectPage h2 {
  text-align: center;
}

.nextIMGs {
  -o-object-position: 55% 0% !important;
     object-position: 55% 0% !important;
}

#projectProb, #projectColour, #projectTypo, #projectPattern, #footer {
  scroll-margin-top: 255px;
}

/* ANIMATIONS */
@keyframes topBarIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes header1In {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes headerPIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes headerAIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes headerIMG1In {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes lineReveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.scroll-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
}

.scroll-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */
/* Laptops / small desktops */
@media (min-width: 1024px) {
  body {
    padding: 32px 74px;
  }
  #topBar {
    left: 74px;
    right: 74px;
  }
  header {
    width: 768px;
  }
  #clientProject {
    gap: 40px;
  }
  #hireMe .hireNumber {
    font-size: 124px;
  }
  #hireMe .hireItem {
    padding-left: 114px;
    padding-top: 48px;
  }
  .projectPage .projectHeaderImage {
    left: -74px;
  }
  footer #footerLinks {
    width: 773px;
  }
}
/* Large desktops */
@media (min-width: 1440px) {
  body {
    padding: 32px 104px;
  }
  #topBar {
    gap: 64px;
    left: 104px;
    right: 104px;
  }
  #topBar #homeNav {
    font-size: 28px;
  }
  #aboutSection, #cliProimages {
    flex-wrap: nowrap;
  }
  #aboutSection {
    justify-content: space-between;
  }
  #cliProleft, #cliProright {
    width: -webkit-fill-available;
  }
  #clientProject {
    gap: 80px;
  }
  #clientProject #cliProimages img:first-of-type {
    height: 574px;
    width: auto;
  }
  #clientProject #cliProimages img:nth-of-type(2), #clientProject #cliProimages img:last-of-type {
    display: block;
  }
  #clientProject a {
    margin-left: auto;
  }
  #hireMe .hireItem {
    width: 50%;
  }
  #recentProjects #recProCont, #archiveProjects #recProCont, #projectNextOptions #recProCont {
    flex-wrap: nowrap;
  }
  #recentProjects #recentCol1, #recentProjects #recentCol2, #recentProjects #recentCol3, #projectNextOptions #recentCol1, #projectNextOptions #recentCol2, #projectNextOptions #recentCol3 {
    max-width: 600px;
  }
  #recentProjects #recentCol1 img, #recentProjects #recentCol2 img, #projectNextOptions #recentCol1 img, #projectNextOptions #recentCol2 img {
    min-width: 600px;
    max-width: 600px;
  }
  #recentProjects #recProSmall, #projectNextOptions #recProSmall {
    min-width: 600px;
    max-width: 600px;
  }
  .projectPage .projectHeaderImage {
    left: -104px;
  }
}
@media (min-width: 1600px) {
  body {
    padding: 32px 164px;
  }
  #topBar {
    left: 164px;
    right: 164px;
  }
  .projectPage .projectHeaderImage {
    left: -164px;
  }
}
/* IMAGE FINE TUNING */
#rcph .projectHeaderImage {
  -o-object-position: 50% 36%;
     object-position: 50% 36%;
}

#rcph #single1, #rcph #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#minecraft .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#minecraft #single1, #minecraft #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#ticketing .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#ticketing #single1 {
  -o-object-fit: contain;
     object-fit: contain;
}

#party .projectHeaderImage {
  -o-object-position: 50% 20%;
     object-position: 50% 20%;
}

#party .projectimgCont4, #blueprint .projectimgCont4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#party .projectimgCont4 .projectImages, #blueprint .projectimgCont4 .projectImages {
  -o-object-fit: contain;
     object-fit: contain;
}

#idle #single1, #idle #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#google #single1, #google #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#decor #single1 {
  -o-object-fit: contain;
     object-fit: contain;
}

#steam .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#steam #single1, #steam #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#reddit .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#reddit #single1, #reddit #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#gameshow #single1, #gameshow #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#ecommercetemp .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#ecommercetemp #single1, #ecommercetemp #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#cloudyne .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#cloudyne #single1 {
  -o-object-fit: contain;
     object-fit: contain;
}

#artshop .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#artshop #single1, #artshop #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#twitch .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#twitch #single1, #twitch #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#pout .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#pout #single1 {
  -o-object-fit: contain;
     object-fit: contain;
}

#helene .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#helene #single1, #helene #single2 {
  -o-object-fit: contain;
     object-fit: contain;
}

#sherwood .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#sherwood #single1 {
  -o-object-fit: contain;
     object-fit: contain;
}

#sheame .projectHeaderImage {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

#sheame #single1 {
  -o-object-fit: contain;
     object-fit: contain;
}

/* FIGMA IMPLEMENTATION */
#figmaProto {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto 102px;
}/*# sourceMappingURL=main.css.map */