@font-face {
  font-family: Primal;
  src: url('../fonts/Primal.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.body {
  background-color: #070c05;
}

.div-block-5 {
  z-index: 3;
  background-image: linear-gradient(0deg, #070c05, #fff0 46%);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  height: auto;
  display: flex;
  position: relative;
}

.heading {
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Primal, Arial, sans-serif;
  font-size: 3vw;
  line-height: 3vw;
  display: flex;
}

.text-block {
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: .3vw;
  font-family: Roboto, sans-serif;
  font-size: 1vw;
  font-weight: 300;
  line-height: 1.5vw;
}

.div-block-11 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 100vh;
  padding-left: 10vw;
  padding-right: 5vw;
  display: flex;
  position: relative;
}

.div-block-12 {
  justify-content: flex-end;
  align-items: flex-start;
  width: 60%;
  height: 100vh;
  padding-top: 5vh;
  padding-right: 5vw;
  display: flex;
  position: sticky;
  top: 0;
}

.div-block-13 {
  z-index: 1;
  background-image: url('../images/Walkout-Pixel-Version-LeftSpace.jpg');
  background-position: 50%;
  background-size: cover;
  height: 100vh;
  margin-top: -100vh;
  position: relative;
}

.text-block-2 {
  color: #fff;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 1vw;
  font-weight: 300;
  line-height: 1.5vw;
}

.div-block-18 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 2vh;
  margin-bottom: 5vh;
  display: flex;
}

.div-block-24 {
  overflow: hidden;
}

.div-block-26 {
  background-image: url('../images/SynthCraftV2.jpg');
  background-position: 50%;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin-top: 25vh;
  display: flex;
}

.heading-3 {
  color: #fff;
  font-family: Primal, Arial, sans-serif;
  font-size: 2.4vw;
  line-height: 2.5vw;
}

.text-block-3 {
  color: #fff;
  margin-top: 2vh;
  font-family: Roboto, sans-serif;
  font-size: 1vw;
  font-style: normal;
  font-weight: 100;
  line-height: 1.5vw;
}

.div-block-31 {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 50%;
  height: 100vh;
  padding-bottom: 15vh;
  padding-left: 5vw;
  padding-right: 15vw;
  display: flex;
  position: relative;
}

.div-block-32 {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 50%;
  height: 100vh;
  padding-bottom: 15vh;
  padding-right: 5vw;
  display: flex;
}

.button {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #dedede;
  text-transform: uppercase;
  background-color: #3f3f3f00;
  border: 1px solid #ffffff63;
  border-radius: .1vw;
  margin-right: 1vw;
  padding-left: 1vw;
  padding-right: 1vw;
  font-family: Roboto, sans-serif;
  font-size: .6vw;
  font-weight: 300;
  line-height: 2vw;
  transition: background-color .6s;
}

.button:hover {
  color: #fff;
  background-color: #ffbe1b26;
}

.button.slim {
  color: #fff;
  background-color: #3a3a3a7d;
  border-style: none;
  margin-right: 0;
  font-size: .8vw;
  font-weight: 300;
}

.button.right {
  margin-right: 0;
}

.div-block-33 {
  margin-top: 5vh;
}

.div-block-34 {
  margin-right: 0;
  padding-left: 0;
}

.div-block-35 {
  z-index: 100;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 15vw;
  height: 100vh;
  padding-top: 6vh;
  padding-bottom: 5vh;
  padding-left: 0;
  display: flex;
  position: relative;
  inset: 0% 0% 0% auto;
}

.div-block-36 {
  color: #626b64;
  text-transform: uppercase;
  margin-bottom: 1.5vh;
  font-family: Roboto, sans-serif;
  font-size: .9vw;
  font-weight: 300;
  text-decoration: none;
  transition: color .45s;
}

.div-block-36:hover {
  color: #9ea89f;
}

.div-block-36.w--current {
  color: #ffc77f;
  -webkit-text-stroke-color: #ffc579;
  text-shadow: 0 0 13px #ff0004;
  margin-bottom: 1.5vh;
}

.div-block-36.hire {
  color: #9f9f9f;
  border: 1px solid #ffffff87;
  margin-top: 2vh;
  padding: 2vh 1vw;
  transition: background-color .45s, color .45s;
}

.div-block-36.hire:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff9;
  background-color: #ce9d6421;
  border-color: #ce9d64;
}

.heading-4 {
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0;
  font-family: Roboto, sans-serif;
  font-size: 1.2vw;
  font-weight: 300;
  line-height: 1.2vw;
}

.content-div {
  padding-top: 3vh;
}

.button-2 {
  color: #000;
  text-transform: uppercase;
  background-color: #ffffffe0;
  margin-top: 3vh;
  font-family: Roboto, sans-serif;
  font-size: .7vw;
  font-weight: 400;
}

.image {
  opacity: .33;
  width: 5vw;
  margin-bottom: 3vh;
  padding-top: 5vh;
  position: absolute;
  inset: 0% auto auto 0%;
}

.div-block-37, .div-block-38 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.logo-img {
  width: 8vw;
  margin-bottom: 2vh;
}

.features {
  display: flex;
}

.features-section {
  width: 85vw;
  padding-left: 4vw;
  padding-right: 3vw;
}

.navigation-wrapper {
  width: 15%;
  height: 100vh;
  position: sticky;
  top: 0;
}

.feature-div-wrapper {
  padding-top: 5vh;
  padding-left: 0;
  padding-right: 0;
}

.feature-div {
  background-color: #0a1407;
  border-radius: 1vw;
  height: auto;
  min-height: 60vh;
  display: flex;
  overflow: hidden;
}

.image-div {
  background-image: url('../images/Digitalarchiology-V2.jpg');
  background-position: 0%;
  background-size: cover;
  width: 60%;
}

.image-div.archaeology {
  background-image: url('../images/VonfalAI-Holodeck-3.jpg');
  background-position: 50%;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 2vw;
  padding-bottom: 2vw;
  padding-right: 2vw;
  display: flex;
}

.image-div.webdevelopment {
  background-image: url('../images/WorkstationxPixel.jpg');
}

.image-div.protocolgenesis {
  background-image: url('../images/Sophia-Wide-V4.jpg');
  background-position: 50% 0;
}

.image-div.video {
  background-image: url('../images/Echoborn-Cover-2.jpg');
  background-position: 50%;
}

.feature-content-div {
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 40%;
  padding: 5vh 5vw;
  display: flex;
}

.heading-5 {
  color: #ffd8a5;
  text-transform: uppercase;
  text-shadow: 0 0 9px #fff3;
  margin-top: 1vh;
  margin-bottom: 3vh;
  font-family: Primal, Arial, sans-serif;
  font-size: 1.7vw;
  line-height: 1.8vw;
}

.text-block-5 {
  color: #ffd38c;
  text-transform: uppercase;
  font-family: Roboto, sans-serif;
  font-size: .8vw;
  font-weight: 300;
  line-height: 1vw;
}

.text-block-6 {
  font-family: Roboto, sans-serif;
  font-size: .7vw;
  font-weight: 100;
  line-height: 1.3vw;
}

.text-block-7 {
  color: #fff;
  text-transform: uppercase;
  font-family: Roboto, sans-serif;
  font-weight: 100;
}

.div-block-43 {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  height: 5vh;
  margin-top: 5vh;
  display: flex;
}

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

.div-block-44 {
  justify-content: flex-start;
  align-items: center;
  height: 5vh;
  padding-left: 2vw;
  display: flex;
  position: absolute;
  inset: 0% auto auto 0%;
}

.div-block-45 {
  margin-top: 2vh;
  display: flex;
}

.nav-wrapper {
  flex-flow: column;
  display: flex;
}

.nav-wrapper.footer {
  margin-bottom: -1.5vh;
}

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

.div-block-48 {
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 30vh;
  display: flex;
}

.div-block-49 {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 70vh;
  display: flex;
}

.div-block-50 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.image-3 {
  opacity: 1;
  mix-blend-mode: normal;
  width: 5vw;
}

.image-3._2 {
  opacity: 1;
  margin-left: -5vw;
  display: none;
}

.div-block-51 {
  z-index: 2;
  background-image: url('../images/Dustx2000.png');
  background-position: 0 0;
  background-size: cover;
  height: 100vh;
  margin-top: -100vh;
  position: relative;
}

.code-embed {
  position: relative;
}

.div-block-55 {
  -webkit-backdrop-filter: blur(19px);
  backdrop-filter: blur(19px);
  height: auto;
  margin-top: 0;
}

.heading-6 {
  color: #fff;
  margin-top: 1vw;
  font-family: Roboto, sans-serif;
  font-size: 1vw;
  font-weight: 300;
  line-height: 1.3vw;
}

.nav {
  display: none;
}

.link {
  color: #fff;
  font-weight: 300;
  text-decoration: none;
}

.image-4 {
  width: 5vw;
}

.div-block-58 {
  background-image: url('../images/Logos.png');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 7vw;
  height: 15vh;
}

.link-2 {
  color: #fff;
  font-weight: 300;
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  .div-block-5 {
    justify-content: flex-start;
    align-items: center;
    padding-left: 15vw;
  }

  .heading {
    font-size: 5vw;
    line-height: 5vw;
  }

  .text-block {
    margin-top: 2vw;
    font-size: 1.7vw;
  }

  .div-block-11 {
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 15vh;
    padding-left: 0;
    padding-right: 0;
  }

  .div-block-12 {
    display: none;
  }

  .div-block-13 {
    background-position: 50%;
  }

  .text-block-2 {
    font-size: 2vw;
    line-height: 3vw;
  }

  .div-block-18 {
    margin-bottom: 3vh;
  }

  .heading-3 {
    font-size: 4vw;
    line-height: 5vw;
  }

  .text-block-3 {
    font-size: 2vw;
    line-height: 3vw;
  }

  .div-block-31 {
    width: auto;
    padding-right: 25vw;
  }

  .div-block-32 {
    display: none;
  }

  .button {
    text-align: center;
    width: 100%;
    margin-bottom: 2vh;
    margin-right: 0;
    padding-left: 5vw;
    padding-right: 5vw;
    font-size: 1.6vw;
    line-height: 4vw;
  }

  .div-block-35 {
    display: none;
  }

  .heading-4 {
    font-size: 3vw;
  }

  .logo-img {
    width: 13vw;
    margin-bottom: 3vh;
  }

  .features-section {
    width: auto;
  }

  .navigation-wrapper {
    display: none;
  }

  .feature-div-wrapper {
    display: block;
  }

  .feature-div {
    flex-flow: column;
  }

  .image-div {
    width: 100%;
    height: 50vh;
  }

  .image-div.archaeology {
    flex: 0 auto;
    order: -1;
    padding-bottom: 5vw;
    padding-right: 5vw;
  }

  .image-div.protocolgenesis {
    order: -1;
  }

  .feature-content-div {
    width: auto;
  }

  .heading-5 {
    text-align: center;
    margin-top: 2vh;
    font-size: 3.8vw;
    line-height: 4vw;
  }

  .heading-5.shorter {
    width: 70%;
  }

  .text-block-5 {
    text-align: center;
    font-size: 2vw;
    line-height: 2vw;
  }

  .text-block-6 {
    text-align: center;
    font-size: 2vw;
    line-height: 3vw;
  }

  .div-block-45 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 5vh;
  }

  .div-block-52, .div-block-53 {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .nav {
    -webkit-backdrop-filter: blur(17px);
    backdrop-filter: blur(17px);
    background-color: #070c0594;
    justify-content: center;
    align-items: center;
    height: 5vh;
    display: flex;
    position: fixed;
    inset: auto 0% 0%;
    box-shadow: 0 -10px 5px -6px #00000087;
  }

  .div-block-57 {
    color: #adadad;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    font-family: Roboto, sans-serif;
    font-size: 1.2vw;
    font-weight: 300;
    text-decoration: none;
    display: flex;
  }

  .div-block-57.w--current {
    color: #ffcc6d;
    text-shadow: 0 1px 5px #ffffff9e;
    background-image: radial-gradient(circle, #ffd8a51f, #fff0);
  }

  .text-block-8 {
    font-weight: 300;
  }

  .image-4 {
    width: 10vw;
  }

  .div-block-58 {
    width: 15vw;
    height: 16vh;
  }

  .div-block-59 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .div-block-60 {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
}

@media screen and (max-width: 479px) {
  .div-block-5 {
    padding-left: 0;
  }

  .heading {
    margin-bottom: 2vw;
    font-size: 9vw;
    line-height: 9vw;
  }

  .text-block {
    font-size: 3vw;
  }

  .div-block-11 {
    width: 100%;
    padding-bottom: 18vh;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .div-block-13 {
    background-image: url('../images/VonfalAI-Mobilke-Cover.jpg');
    background-position: 50% 0;
  }

  .text-block-2 {
    font-size: 4vw;
    line-height: 5.5vw;
    display: none;
  }

  .heading-3 {
    text-align: center;
    margin-bottom: 0;
    font-size: 6vw;
    line-height: 7vw;
  }

  .text-block-3 {
    text-align: center;
    margin-top: 2vh;
    font-size: 4vw;
    line-height: 5vw;
  }

  .div-block-31 {
    justify-content: flex-end;
    align-items: center;
    padding-right: 5vw;
  }

  .button {
    -webkit-backdrop-filter: blur();
    backdrop-filter: blur();
    text-align: center;
    border-color: #ffffff1c;
    width: 80vw;
    margin-bottom: 1vh;
    margin-right: 0;
    padding-left: 5vw;
    padding-right: 5vw;
    font-size: 3vw;
    line-height: 7vw;
  }

  .div-block-33 {
    flex-flow: column;
    width: 100%;
    margin-top: 3vh;
    display: flex;
  }

  .heading-4 {
    margin-bottom: 0;
  }

  .div-block-37 {
    font-size: 4vw;
  }

  .logo-img {
    width: 20vw;
  }

  .feature-div {
    border-radius: 3vw;
  }

  .image-div.archaeology {
    background-image: linear-gradient(0deg, #0a1407, #fff0 9%), url('../images/VonfalAI-Holodeck-3.jpg');
    background-position: 0 0, 50%;
    background-size: auto, cover;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 3vh;
    padding-left: 5vw;
  }

  .image-div.webdevelopment {
    background-image: linear-gradient(0deg, #0a1407, #fff0 33%), url('../images/WorkstationxPixel.jpg');
    background-position: 0 0, 50%;
    background-size: auto, cover;
  }

  .image-div.protocolgenesis {
    background-image: linear-gradient(0deg, #0a1407, #fff0 29%), url('../images/Sophia-Wide-V4.jpg');
    background-position: 0 0, 50% 0;
    background-size: auto, cover;
  }

  .image-div.video {
    background-image: linear-gradient(0deg, #0a1407, #fff0 33%), url('../images/Echoborn-Cover-2.jpg');
    background-position: 0 0, 50%;
    background-size: auto, cover;
  }

  .image-div.system {
    background-image: linear-gradient(0deg, #0a1407, #fff0 21%), url('../images/Digitalarchiology-V2.jpg');
    background-position: 0 0, 0%;
    background-size: auto, cover;
    height: 30vh;
  }

  .heading-5 {
    font-size: 6vw;
    line-height: 7vw;
  }

  .text-block-5 {
    margin-bottom: 1vh;
    font-size: 3.5vw;
    line-height: 4vw;
  }

  .text-block-6 {
    font-size: 4vw;
    line-height: 5vw;
  }

  .div-block-45 {
    flex-flow: column;
    width: 100%;
    margin-top: 5vh;
  }

  .div-block-54 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .bold-text {
    text-align: center;
    font-size: 7vw;
  }

  .nav {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: #070c0500;
    height: 7vh;
  }

  .div-block-57 {
    justify-content: center;
    align-items: center;
    font-size: 2.2vw;
  }

  .link {
    color: #fff;
    font-weight: 300;
    text-decoration: none;
  }

  .image-4 {
    width: 15vw;
  }

  .bold-text-2 {
    font-weight: 500;
  }
}


@font-face {
  font-family: 'Primal';
  src: url('../fonts/Primal.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}