body {
  margin: 0;

  --aspect-ratio: 1/1.5;
  --imgwidthmax: 500px;
  --size-title: 5rem;
  --font-weight-title: 400;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.demo-1 {
  --color-text: #001d35;
  --color-link-hover: #5c4541;
  --aspect-ratio: 32/17;
  font-size: 18px;
  --size-title: 15vw;
}

.demo-2 {
  --blendmode-title: difference;
  --size-title: 12vw;
}

.demo-3 {
  --color-text: #905348;
  --color-bg: #120605;
  --color-link: #8f8f76;
  --color-link-hover: #fff;
  font-size: 1rem;
  --imgwidthmax: 400px;
  --color-description: #7e605b;
  --font-title: ivymode;
  --size-title: 9vw;
  --imgwidthmax: 600px;
}

.demo-4 {
  --color-text: #a9a798;
  --color-bg: #cccdb9;
  --color-link: #fff;
  --color-link-hover: #a9a798;
  --color-title: #fff;
  --font-title: inherit;
  --font-weight-title: 100;
  font-size: 1.15rem;
  --imgwidthmax: 520px;
}

.demo-5 {
  --color-text: #f0f0f0;
  --color-bg: #001d35000;
  --color-link: #c5a45b;
  --color-link-hover: #f0f0f0;
  --color-title: #f0f0f0;
  --font-title: inherit;
  font-size: 1.15rem;
  --aspect-ratio: 1/1.5;
  --font-weight-title: 800;
}

.demo-6 {
  --color-text: #e01723;
  --color-bg: #deaaad;
  --color-link: #c55b61;
  --color-link-hover: #1d1414;
  --color-title: #1d1414;
  --font-title: inherit;
  font-size: 1.15rem;
  --aspect-ratio: 1/1.5;
  --imgwidthmax: 505px;
}

/* Page Loader */
.js .loading::before {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
}

.js .loading::after {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.4;
  background: var(--color-link);
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  transition: 0.3s ease-in-out;
}

a:hover,
a:focus {
  color: #0371f5;
  outline: none;
  text-decoration: none;
}

.page {
  display: grid;
  /*padding: 5vw;*/
  max-width: 1400px;
  margin: 0 auto;
  grid-template-columns: 100%;
  grid-template-areas: "header" "meta" "grid";
  will-change: transform;
}

.page__title {
  grid-area: header;
  margin: 0 0 1rem;
  font-size: inherit;
  font-weight: 400;
}

.credits {
  text-align: center;
}

.credits--fixed {
  position: fixed;
  bottom: 5vw;
  margin: 0;
  left: 5vw;
  width: 90vw;
  text-align: right;
}

.credits--fixed::before {
  content: "";
  background: currentColor;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5rem;
  width: 1px;
}

.meta {
  grid-area: meta;
}

.meta--center {
  justify-self: center;
  padding-top: 20vh;
}

.meta__links {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5;
}

.meta__links--column {
  flex-direction: column;
}

.meta__links a {
  margin: 0 1.5rem 0 0;
}

.meta__demos {
  margin-top: 1rem;
}

.meta__demo {
  display: inline-block;
  margin-right: 0.75rem;
}

.meta__demo--current {
  color: var(--color-link-hover);
  pointer-events: none;
}

.content {
  grid-area: grid;
  margin: 0 0;
}

.content--offset {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  grid-gap: 30vh 10vw;
}

.content--full {
  width: 100vw;
  justify-self: center;
}

.content--padded {
  padding: 0 10vw;
}

.content__item {
  --imgwidth: calc(var(--imgwidthmax) * var(--aspect-ratio));
  width: var(--imgwidth);
  max-width: 100%;
  position: relative;
  will-change: transform;
  margin: auto;
  margin-bottom: 12vh;
  display: grid;
  grid-template-columns: 50% 50%;
}

.content__item--wide {
  grid-template-columns: 20% 80%;
}

.content--center .content__item {
  margin: 0 auto 60vh;
}

.content__item--expand {
  width: 100%;
  grid-template-columns: minmax(0, var(--imgwidth)) 1fr;
}

.content--alternate .content__item {
  max-width: 90vw;
}

.content--alternate .content__item:first-child,
.content--alternate .content__item.mob,
.content--alternate .content__item.nxtpro {
  max-width: 100vw;
  width: 100%;
}
.content--alternate .content__item:first-child .content__item-title {
  font-size: 4.5rem;
  text-transform: uppercase;
  color: #ffffff;
  /*font-family: nexa-b;*/
  letter-spacing: 2px;
}
.content--alternate .content__item:first-child .content__item-title,
.content--alternate .content__item.nxtpro .content__item-title {
  grid-area: 1 / 3 / 4 / 1;
  justify-self: center;
  text-shadow: 0 0 4px #737373;
}

.content--offset .content__item {
  margin: 0 auto 15vh;
}

.content--offset .content__item {
  align-self: end;
  margin-bottom: -20vh;
}

.content__item-imgwrap {
  position: relative;
  --imgwidth: 100%;
  margin: 0 auto;
  grid-area: 1 / 1 / 3 / 3;
  overflow: hidden;
  width: var(--imgwidth);
  padding-bottom: calc(var(--imgwidth) / (var(--aspect-ratio)));
  will-change: transform;
}

.demo-2 .content__item-imgwrap {
  outline: 1px solid transparent;
}

.content__item--expand .content__item-imgwrap {
  grid-area: 1 / 1 / 3 / 2;
}

.content__item-img {
  --overflow: 40px;
  height: calc(100% + (2 * var(--overflow)));
  top: calc(-1 * var(--overflow));
  width: 100%;
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  will-change: transform;
  /*opacity: 0.8;*/
}
.pd {
  padding-left: 4rem;
  padding-bottom: 30rem;
}
.content__item-img--t1 {
  --overflow: 60px;
}

.content__item-img--t2 {
  --overflow: 80px;
}

.content__item-img--t3 {
  --overflow: 120px;
}

.content__item-number {
  opacity: 0.03;
  font-size: 25vw;
  position: absolute;
  top: -7vw;
  right: -10vw;
  line-height: 1;
}

.content__item-title {
  position: relative;
  font-size: 4rem;
  /* padding: 0 3vw; */
  margin: calc(var(--size-title) * -1 / 2) 0 0 0;
  margin-top: 0;
  align-self: center;
  line-height: 1;
  font-weight: var(--font-weight-title);
  color: #0371f5;
  will-change: transform;
  mix-blend-mode: var(--blendmode-title);
}
.content__item-title span {
  font-size: 2.6rem;
  display: block;
  font-weight: bold;
  margin: 10px 0;
}
.mob-sec {
  padding: 10rem;
  background-color: #adeeff;
}
.mob-sec.tex {
  background-color: #001d35;
  color: #fff;
}
.mob-sec p {
  width: 85%;
}
.newproj-sec {
  padding: 17rem;
  background-color: #12bbf6;
}
.start {
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
  position: relative;
  padding-left: 70px;
  transition: 0.3s;
  /*font-family: nexa-b;*/
  text-transform: capitalize;
}
.start:after {
  content: "";
  width: 63px;
  height: 2px;
  background: #001d35;
  position: absolute;
  top: 50%;
  left: 0;
  transition: 0.3s;
}
.start:hover {
  text-decoration: none;
  padding-left: 0px;
  padding-right: 70px;
}
.start:hover:after {
  left: 75%;
  background: #0371f5;
  /*left: 63px;*/
}
.newproj-sec .mytitle {
  margin: 20px 0;
  font-size: 4.3rem;
  color: #fff;
}
.m-0 {
  margin: 0;
}
.data {
  padding-bottom: 70px;
}
.mar-55 {
  margin: 55px 5px;
}
.mytitle {
  margin: 20px 0;
  font-size: 3.3rem;
}
.mytitle span {
  font-size: 2.5rem;
  display: block;
  margin: 30px 0 15px;
}
.team {
  margin-top: 85px;
  padding-bottom: 80px;
}
.team .newproj-sec a {
  color: #fba01c;
  text-transform: capitalize;
}
.team .newproj-sec a:after {
  background: #fba01c;
}

.team .newproj-sec a:hover:after {
  left: 74%;
}

.team h2 {
  text-transform: capitalize;
  font-size: 50px;
  font-weight: bold;
  color: #06859b;
  line-height: 1.3;
  margin-bottom: 29px;
}
.full .content__item-img {
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}
.full .content__item-description {
  grid-area: 1 / 2 / 3 / 2;
  width: 83%;
  position: relative;
  margin: 0;
  padding: 14rem 0 0 35rem;
}
.full .content__item-description span {
  font-size: 26px;
  color: #0371f5;
  /*font-family: nexa-b;*/
  margin-bottom: 16px;
  display: block;
}
.content__item.content__item--wide.full {
  max-width: 100vw;
  width: 100%;
}
.wedo.content__item.content__item--wide {
  max-width: 60vw;
  width: 60%;
  margin: inherit;
  grid-template-columns: 74% 80%;
}
.wedo .content__item-imgwrap {
  position: relative;
  --imgwidth: 100%;
  grid-column-start: auto;
  padding-bottom: 35rem;
}
.wedo p.content__item-description span {
  font-size: 3rem;
  text-transform: capitalize;
  display: block;
}
.wedo .content__item-description {
  grid-area: 1 / 1 / 3 / 3;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 6rem 0 0 10rem;
  color: var(--color-description);
}
.wedo .content__item-img {
  --overflow: 2px;
}
.data .row {
  margin: 45px 10px;
}
.row.prob {
  margin-top: 80px;
}
.prob h4 span {
  font-size: 22px;
  display: block;
  margin: 8px 0;
}
.prob h4 {
  font-size: 20px;
  /*font-family: nexa-b;*/
}
.content--center .content__item-title {
  grid-area: 1 / 1 / 3 / 3;
  margin: auto;
}

.content__item-title--layer {
  padding: 0;
  z-index: 10;
  grid-area: 1 / 1 / 2 / 3;
  width: 100%;
  text-align: center;
}

.content__item-description {
  grid-area: 3 / 1 / 3 / 3;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 6rem 0 0 0;
  color: var(--color-description);
}

.content--alternate .content__item-title {
  grid-area: 3 / 1 / 4 / 5;
  justify-self: start;
  text-transform: capitalize;
}

.content__item--expand .content__item-description {
  grid-area: 1 / 2 / 3 / 3;
  justify-self: start;
  align-self: start;
  padding: 0 2rem;
  width: 250px;
  font-size: 0.9rem;
}

.content__item-deco {
  position: absolute;
  top: 2rem;
  left: 10vw;
  height: 30%;
  width: 1px;
  background: #d79612;
}

.content__item-decobar {
  width: 140%;
  height: 25%;
  top: 20%;
  left: -20%;
  position: absolute;
  background: #dd525a;
  mix-blend-mode: color-burn;
}

@media screen and (min-width: 53em) {
  .page--layout-1 {
    grid-template-columns: 30% 70%;
    grid-template-areas: "header header" "...  meta" "grid grid";
  }
  .page--layout-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "header meta" "...  meta" "grid grid";
  }
}

@media screen and (max-width: 40em) {
  .content__item--expand .content__item-imgwrap {
    grid-area: 1 / 1 / 3 / 3;
  }
  .content__item--expand .content__item-description,
  .content__item--wide .content__item-description {
    grid-area: 3 / 1 / 4 / 3;
    padding: 1rem 0;
    width: 100%;
    text-align: left;
  }
  .content__item--wide .content__item-description {
    padding: 1rem;
  }
  .content--alternate .content__item-title {
    grid-area: 1 / 1 / 4 / 2;
  }
}
.site__footer {
  /*top: -100px;*/
  position: relative;
}

.marquee2 {
  position: relative;
  z-index: 9;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.marquee {
  display: inline-flex;
  flex-wrap: nowrap;
  animation: next-horizontal-moving 17s linear infinite;
  color: white;
  text-align: center;
}

.marquee span {
  /*font-family: nexa-b;*/
  font-size: 75px;
  color: #fff;
  line-height: normal;
  letter-spacing: 0;
  display: block;
  white-space: nowrap;
  margin: 0 90px;
}
.nxtpro samp {
  font-size: 46px;
  color: #fff;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 20%;
  text-align: center;
  left: 0;
  /*font-family: nexa-b;*/
  text-transform: capitalize;
  right: 0;
  margin: 0 auto;
}

@keyframes next-horizontal-moving {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-66.6%);
  }
}
@media (max-width: 900px) {
  .content__item-img.opacity-3 {
    opacity: 0.4;
  }
  .content__item-img.flip-res {
    -webkit-transform: scaleX(-1) !important;
    transform: scaleX(-1) !important;
  }
}