@font-face {
  font-family: "Gotham";
  src: url("assets/fonts/GothamBlack.otf");
}

@font-face {
  font-family: "Gotham Medium";
  src: url("assets/fonts/GothamMedium.ttf");
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Gotham";
  background-color: #f6f6f6;
  margin: 0;
}

a {
  text-decoration: none;
  color: unset;
}

ul,
li,
p,
h2 {
  list-style: none;
  margin: 0;
  padding: 0;
}

header {
  background-color: #316cff;
  height: 477.5px;
  height: 940px;
}

header.sticky {
  position: relative;
  /* top: -108px; */
}

header::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  border-left: 130px solid #2b64ff;
  border-right: 450px solid transparent;
  border-bottom: 940px solid #2b64ff;
}

header.sticky::before {
  left: 0px;
  top: 0px;
  border-left: 135px solid #2b64ff;
}

header::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  border-left: 830px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 960px solid #2b64ff;
  mix-blend-mode: color-dodge;
  opacity: 0.2;
  border-image: linear-gradient(
    -66deg,
    #ffffff 52.02%,
    rgba(255, 255, 255, 0) 52.01%
  );
  mix-blend-mode: overlay;
}

#xlabs-logo {
  width: 253px;
  height: 92px;
  position: absolute;
  left: 7.5%;
  left: calc((100% - 1440px) / 2);
  top: 92px;
}

/* header.sticky #xlabs-logo {
  top: 122px;
} */

.booking-lab {
  color: #ffffff;
  letter-spacing: -0.03em;
  position: absolute;
  left: 7.5%;
  left: calc((100% - 1440px) / 2);
  top: 179px;
  font-size: 3.75em;
  font-size: 7.4em;
  line-height: 100.8px;
}

.lab-links {
  display: flex;
  position: absolute;
  left: 7.5%;
  left: calc((100% - 1440px) / 2);
  /* top: 438px;
  top: 28px; */
  font-family: "Arial";
  z-index: 5;
  width: fit-content;
}

nav {
  width: 100%;
  /* max-width: 1904px; */
  height: 100px;
  position: absolute;
  top: 406.5px;
  z-index: 500;
  display: flex;
  align-items: center;
}

nav.sticky {
  position: sticky;
  position: fixed;
  top: 0;
  background-image: unset;
  /* background-color: #2b64ff; */
}
nav.sticky.blue {
  background-color: #2b64ff;
  /* background-color: #316cff; */
  transition: background-color 1s;
}
nav.sticky.clear {
  background-color: transparent;
  transition: background-color 1s;
}

.lab-links li {
  margin-right: 66px;
  /* font-size: 0.875em; */
  cursor: pointer;
  /* font-weight: bold; */
  font-size: 2em;
}

.lab-links li.active {
  cursor: default;
}

.lab-links li:hover,
.lab-links li.active {
  color: #fff;
}

#lab-hero {
  position: absolute;
  left: 7.5%;
  left: calc((100% - 1440px) / 2);
  top: 535px;
  width: 85%;
  max-width: 1440px;
  z-index: 1;
}

.shader {
  position: absolute;
  width: 34.25%;
  height: 968px;
  right: -10.5%;
  transform: matrix(0.92, 0, -0.46, 1, 0, 0);
  background: linear-gradient(
    61deg,
    #ffffff 27.02%,
    rgba(255, 255, 255, 0) 57.01%
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
  opacity: 0.3;
}

.welcome-section {
  /* min-height: 1870px; */
  min-height: 1570px;
}

.welcome-section.form {
  min-height: 1050px;
}

.welcome-section.form.discovery-form {
  min-height: 900px;
}

.shader-2 {
  background: linear-gradient(
    112deg,
    #d9d9d9 14.77%,
    rgba(217, 217, 217, 0) 27.24%
  );
  opacity: 0.2;
  transform: matrix(0.92, 0, -0.46, 1, 0, 0);
  position: absolute;
  width: 200px;
  /* height: 428px; */
  height: 1528px;
  /* right: 394px; */
  right: 1025px;
  top: 1200px;
  /* box-shadow: -30px -1070px 2px 30px #e5e5e570; */
}

.booking-welcome {
  position: relative;
  font-family: "Gotham Medium";
  letter-spacing: -0.03em;
  line-height: 1.25;
  font-size: 3em;
  max-width: 480px;
  margin-right: 0.5em;
}

.description-area {
  position: relative;
  left: 7.5%;
  left: calc((100% - 1440px) / 2);
  top: 400px;
  width: 86%;
  max-width: 1440px;
  display: flex;
  justify-content: space-between;
  padding: 8em 0;
  z-index: 2;
}

.description {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 586px;
  /* min-height: 1200px; */
  min-height: 900px;
  font-family: "Arial";
  font-size: 20px;
  letter-spacing: -0.03em;
}

.description.shorter {
  min-height: 342px;
}

.description.campaign {
  min-height: 402px;
}

.description.discovery {
  min-height: 262px;
}

.description p {
  line-height: 1.5;
  margin: 0.25em 0;
}

#about-lab,
#important-things {
  font-weight: bold;
}

.important-items {
}

.important-items li {
  list-style: decimal;
  margin: 1em;
}

.important-items li a {
  color: #1c58ec;
}

.playlist-items {
}

.playlist-items li {
  list-style: circle;
  margin: 0.5em 1em;
  background: #fbd2cd;
  width: fit-content;
}
.xxxx {
  /* background: #fbd2cd; */
}

#google-maps {
  background-color: #fff;
  color: #316cff;
  padding: 0.5em;
  border-radius: 0.75em;
  box-shadow: 0px 0px 8px 0px #7e7b7b;
}

.feature-section {
  display: flex;
  position: relative;
  height: 460px;
  height: 718px;
  background-color: #316cff;
  /* animation: fadeInRight 0.5s; */
}

.feature-image-old {
  position: absolute;
  top: -40px;
  left: -830px;
  height: 530px;
  width: 1400px;
  background: linear-gradient(
    278deg,
    rgba(0, 0, 0, 0.2) 5.81%,
    rgba(0, 0, 0, 0.136536) 18.56%,
    rgba(0, 0, 0, 0) 89.68%
  );
  background-repeat: no-repeat;
  background-size: cover;
  transform: matrix(0.83, 0, -0.21, 1, 0, 0);
}

.feature-links {
  position: absolute;
  color: #ffffff;
  display: flex;
  font-family: "Arial";
  left: 604px;
  left: 804px;
  top: 40px;
  z-index: 100;
}

.feature-links li {
  margin-right: 17px;
  padding: 1em 2em;
  border-radius: 2em;
  cursor: pointer;
  transition: 0.5s;
  transition-timing-function: ease-in;
}
.feature-links li#content {
  margin-right: 0;
}

.feature-links li:hover,
.feature-links li.active {
  background-color: #628cff;
}

#feature-area {
  position: absolute;
  left: 604px;
  left: 804px;
  color: #fff;
  /* box-shadow: 5px -474px 0px 0px #f6f6f6; */
}
/* #feature-area.feature-area-dynamic {
  box-shadow: 0px -60px 0px 0px #f6f6f6;
}
#feature-area.feature-area-information {
  box-shadow: 5px -599px 0px 0px #f6f6f6;
} */

.feature-headline {
  font-family: "Gotham";
  font-size: 7.5em;
  max-width: 600px;
  margin-bottom: 0.4em;
  margin-top: 1.35em;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

#media-formats {
  margin-top: 1em;
}

#information {
  margin-top: 1em;
}

.email {
  text-decoration: underline;
}

.feature-image {
  background-image: url("./assets/images/map.webp");
  background-size: 2820px;
  background-position-x: -924px;
  background-position-y: -816px;
  position: relative;
  top: -40px;
  top: -60px;
  width: 860px;
  height: 840px;
  background-repeat: no-repeat;
  /* box-shadow: -42px -6px 0px -7px inset #f6f6f6; */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(30% - 369px),
    calc(70% - 172px) 100%,
    0 100%
  );
}

#triangle {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 457px;
  border-left: 143px solid transparent;
  border-right: 170px solid transparent;
  border-bottom: 315px solid #2b64ff;
}
#subway ~ #triangle,
#office ~ #triangle {
  left: 450px;
  border-left: 142px solid transparent;
}

/* .feature-image::before {
  content: "";
  position: absolute;
  bottom: 62px;
  right: -235px;
  width: 505px;
  height: 778px;
  background: #316cff;
  transform: matrix(0.83, 0, -0.45, 1, 0, 0);
  box-shadow: 0px -10px 0px -10px #316cff, 45px 95px 0px -65px inset #f6f6f6,
    35px 105px 0px -78px inset #f6f6f6, -6px 84px 0px -7px #f6f6f6;
}

.feature-image::after {
  content: "";
  position: absolute;
  height: 60px;
  background: #f6f6f6;
  width: 44px;
  right: 14px;
  transform: skewX(155deg) translateX(-8px);
} */

#map {
  background-image: url("./assets/images/map.webp");
}

#entrance {
  background-image: url("./assets/images/entrance/entrance1.webp");
  background-size: 1550px;
  background-position-x: -390px;
  background-position-y: -25px;
}

#subway {
  background-image: url("./assets/images/subway.webp");
  /* background-size: 1200px;
  background-position-y: -50px;
  background-position-x: -280px; */

  background-size: 1500px;
  background-position-y: 0px;
  background-position-x: -360px;
}

#office {
  background-image: url("./assets/images/office.webp");
  /* background-position-x: -600px;
  background-position-y: -230px;
  background-size: 1450px; */

  background-position-x: -660px;
  background-position-y: -70px;
  background-size: 1620px;
}

#subway,
#office {
  left: -8px;
}

#subway #pin,
#office #pin,
#entrance #pin {
  display: none;
}

#pin {
  position: absolute;
  top: 210px;
  right: 510px;
  width: 100px;
  height: 100px;
}

#head {
  border-radius: 50%;
  background: #316cff;
  position: absolute;
  width: 40px;
  height: 40px;
}

#tail {
  background: #316cff;
  position: absolute;
  left: 33px;
  top: 25px;
  height: 60px;
  width: 2px;
  transform: rotate(159deg);
  border-top: 2px solid #161616;
}

#shadow {
  background: linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  position: absolute;
  bottom: 14px;
  right: 23px;
  width: 32px;
  height: 2px;
  opacity: 0.5;
}

#gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    217.93deg,
    rgba(0, 0, 0, 0.2) 5.81%,
    rgba(0, 0, 0, 0.136536) 18.56%,
    rgba(0, 0, 0, 0) 89.68%
  );
  position: absolute;
  left: -220px;
  transform: matrix(0.95, 0, -0.45, 1, 0, 0);
}

/* #gradient::after {
  content: "";
  position: absolute;
  bottom: 62px;
  right: -351px;
  border-left: 1px solid transparent;
  border-right: 350px solid transparent;
  border-bottom: 315px solid #2b64ff;
} */

#gradient.fade {
  width: 99%;
  height: 99%;
  background: linear-gradient(
    262deg,
    rgba(0, 0, 0, 0.2) 5.81%,
    rgba(0, 0, 0, 0.137) 8.56%,
    rgba(0, 0, 0, 0) 29.68%
  );
  left: -207px;
  top: -1px;
}
#gradient.fade::after {
  bottom: 55px;
  right: -349px;
}

#other-info {
  font-family: "Arial";
  line-height: 1.5;
}

#feature-area.feature-area-information #other-info {
  line-height: unset;
}

#lab-features,
#information-points {
  font-family: "Arial";
  font-size: 1.25em;
  max-width: 730px;
}

#lab-features li,
#information-points li {
  list-style: disc;
  margin: 0.5em 1.75em;
  line-height: 1.5;
  font-size: 1.2rem;
}

.service {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8em 0;
  max-width: 1571px;
  margin: 0 auto;
}

.service-img {
  position: relative;
  width: 52%;
}

.service-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* min-height: 216px; */
}

.service-text.campaign {
  margin-left: 1em;
}
.service-text.discovery {
  margin-right: 1em;
}

.service-text h2 {
  font-family: "Gotham Medium";
  font-size: 3em;
  /* margin: 0.5em 0; */
  line-height: 1;
}
.service-text p {
  font-family: "Arial";
  max-width: 540px;
  font-size: 20px;
  line-height: 1.25;
  margin-left: 0.25em;
}

.book-link-wrap {
  margin-top: 1.5em;
}

.book-link {
  font-family: "Arial";
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: -0.03em;
  font-size: 20px;
}

.book-link:hover {
  color: #6e6c6c;
  color: #2e66ff;
}

.book-link::before {
  content: "/";
  margin-right: 1rem;
  font-size: 42px;
  vertical-align: middle;
  position: relative;
  bottom: 2px;
  font-style: italic;
}

.feature-section.hide,
.service-section.hide,
iframe.hide {
  display: none;
}

iframe,
object {
  width: 84%;
  /* height: 1853px; */
  height: 2325px;
  margin: 0 auto;
  display: block;
  border-width: 1px;
  border-left-color: #f4f4f436;
  border-top-color: #f4f4f46e;
  /* padding: 4px 288px;
  padding: 4px 15%; */
  padding-bottom: 59px;
  padding-bottom: 167px;
  box-sizing: border-box;
  background-color: white;
  margin-bottom: 4em;
}

#frame-wrap,
#object-wrap {
  position: relative;
}

#frame-wrap::before,
#object-wrap::before {
  content: "";
  background-color: white;
  position: absolute;
  height: 99.9%;
  /* width: 286px; */
  width: 15.1%;
  /* left: 154px; */
  left: 8.07%;
  top: 1px;
}

#frame-wrap::after,
#object-wrap::after {
  content: "";
  background-color: white;
  position: absolute;
  height: 99.9%;
  /* width: 286px; */
  width: 15.1%;
  /* right: 154px; */
  right: 8.07%;
  top: 1px;
}

object.hide {
  display: none;
}
object.error,
#object-wrap.error::before,
#object-wrap.error::after {
  background: transparent;
}

#fallback-msg {
  margin: 0 auto;
  width: fit-content;
  color: #3781ff;
  font-size: 1.5em;
  text-align: center;
  position: relative;
  z-index: 10;
}

#allow {
  margin: 0 auto;
  width: fit-content;
  display: block;
  margin-bottom: 1em;
  font-size: 0.75em;
  font-style: italic;
  color: #595959b0;
  color: #fe405eb3;
}
#allow::before {
  content: "[ ";
}
#allow::after {
  content: " ]";
}
#allow::before,
#allow::after {
  font-style: normal;
  font-size: 0.9rem;
  /* color: #d9d9d9; */
}

#safariBtn {
  cursor: pointer;
  margin: 0 auto;
  margin-top: 3em;
  width: fit-content;
  color: #3781ff;
  /* border: 1px solid #fe405eb3; */
  background: #f6f6f6;
  display: block;
  border-radius: 0.5em 0.75em;
  padding: 0.5em;
  box-shadow: 0px 0px 5px 1px #a6a0a0;
}
#safariBtn.hide {
  display: "none";
}

.lds-facebook {
  /* display: inline-block; */
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #7a559c80;
  background: #3781ff5c;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}

@media only screen and (max-width: 1815px) {
  .description-area {
    top: 450px;
  }
}

@media only screen and (max-width: 1710px) {
  .description-area {
    top: 400px;
  }
}

@media only screen and (max-width: 1695px) {
  #xlabs-logo,
  .booking-lab,
  #lab-hero,
  .lab-links,
  .description-area {
    left: 7.5%;
  }
  .service {
    max-width: 93.18%;
  }
}

@media only screen and (max-width: 1600px) {
  .description-area {
    top: 350px;
  }
}

@media only screen and (max-width: 1540px) {
  .welcome-section {
    min-height: 1425px;
  }
  .welcome-section.form {
    min-height: 950px;
  }
  .welcome-section.form.discovery-form {
    min-height: 800px;
  }
  .shader-2 {
    top: 1000px;
    right: 53.4%;
  }
  .description-area {
    top: 300px;
  }
  /* #feature-area {
    box-shadow: 320px -694px 0px 220px #f6f6f6;
  }
  #feature-area.feature-area-dynamic {
    box-shadow: 120px -705px 0px 0px #f6f6f6;
  } */
  #feature-area,
  .feature-links {
    left: 43%;
  }
  .feature-image {
    width: 660px;
  }
  .feature-image::before {
    width: 512px;
    box-shadow: 0px -10px 0px -10px #316cff, 65px 125px 0px -65px inset #f6f6f6,
      35px 105px 0px -78px inset #f6f6f6, -6px 84px 0px -7px #f6f6f6;
  }
  #entrance {
    background-size: 1500px;
    background-position-x: -490px;
    background-position-y: 0px;
  }
  #map {
    background-size: 2130px;
    background-position-x: -704px;
    background-position-y: -586px;
  }
  #triangle {
    left: 313px;
    border-left: 123px solid transparent;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 307px;
    border-left: 122px solid transparent;
  }
  #gradient {
    left: -170px;
  }
  #gradient.fade {
    left: -221px;
  }
  #pin {
    top: 160px;
    right: 380px;
  }
  .service {
    max-width: 91.88%;
  }
}

@media only screen and (max-width: 1350px) {
  .welcome-section {
    /* min-height: 1620px; */
    min-height: 1350px;
  }
  .welcome-section.form {
    min-height: 850px;
  }
  .welcome-section.form.discovery-form {
    min-height: 700px;
  }
  .description-area {
    top: 210px;
  }
  .feature-headline {
    font-size: 6em;
  }
  #feature-area,
  .feature-links {
    left: 50%;
  }
  #feature-area.feature-area-dynamic,
  #feature-area.feature-area-information {
    top: 20px;
  }
  .service {
    max-width: 88.18%;
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 10%;
  }
}

@media only screen and (max-width: 1233px) {
  header::before {
    border-right: 250px solid transparent;
  }
  header::after {
    border-left: 530px solid transparent;
  }
  .booking-lab {
    font-size: 6.5em;
  }
  nav {
    top: 370px;
  }
  /* .lab-links {
    top: 408px;
  } */
  .lab-links li {
    font-size: 1.5em;
  }
  .welcome-section.form {
    min-height: 800px;
  }
  .welcome-section.form.discovery-form {
    min-height: 650px;
  }
  .description-area {
    top: 160px;
  }
  .feature-image {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(30% - 409px),
      calc(70% - 200px) 100%,
      0 100%
    );
  }
  #triangle {
    left: 289px;
    border-left: 125px solid transparent;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 280px;
    border-left: 125px solid transparent;
  }
  #feature-area.feature-area-dynamic {
    top: 0px;
  }
  #feature-area.feature-area-information {
    top: 40px;
  }
  .feature-headline {
    font-size: 5.5em;
    margin-top: 1.5em;
  }
  #media-formats {
    margin-top: 1.5em;
  }
  /* #information {
    height: 146px;
  } */
  .service {
    justify-content: space-between;
    max-width: 86.18%;
  }
  .service-img {
    width: 51%;
    /* height: 574px; */
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 24.7%;
  }
  iframe,
  object {
    /* height: 2770px;
    padding: 8px 0; */
    height: 2670px;
    padding: 42px 0;
  }
}

@media only screen and (max-width: 1130px) {
  .booking-lab {
    font-size: 6em;
  }
  .welcome-section {
    /* min-height: 1360px; */
    min-height: 1110px;
  }
  .welcome-section.form {
    min-height: 700px;
  }
  .welcome-section.form.discovery-form {
    min-height: 550px;
  }
  .description-area {
    top: 120px;
  }
  .description {
    min-height: 422px;
  }
  .description.campaign {
    min-height: 362px;
  }
  .description.discovery {
    min-height: 242px;
  }
  .description p,
  .important-items {
    font-size: 0.9em;
  }
  #about-lab {
    margin: 1em 0;
  }
  .important {
    margin-top: 1.5em;
  }
  /* #feature-area {
    box-shadow: 120px -390px 0px 60px #f6f6f6;
  } */
  #feature-area,
  .feature-links {
    left: 45%;
  }
  .feature-image {
    width: 550px;
  }
  #entrance {
    background-size: 1490px;
    background-position-x: -580px;
    background-position-y: 0px;
  }
  #map {
    background-size: 1680px;
    background-position-x: -574px;
    background-position-y: -456px;
  }
  #subway {
    background-position-x: -390px;
  }
  #triangle {
    left: 209px;
    border-left: 115px solid transparent;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 200px;
    border-left: 116px solid transparent;
  }
  #gradient {
    left: -145px;
  }
  #gradient.fade {
    left: -227px;
  }
  #pin {
    top: 115px;
    right: 285px;
  }
  .service-img {
    width: 45%;
    /* height: 500px; */
  }
  .service-text {
    box-sizing: border-box;
    padding-top: 1em;
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 22.7%;
  }
}

@media only screen and (max-width: 1008px) {
  .shader-2 {
    top: 800px;
  }
  .lab-links li {
    font-size: 1.3em;
  }
  .booking-lab {
    font-size: 5.25em;
  }
  .welcome-section.mobile {
    max-height: 800px;
  }
  .welcome-section.mobile.landscape {
    min-height: 1550px;
  }
  .welcome-section.form {
    min-height: 640px;
  }
  .welcome-section.form.discovery-form {
    min-height: 520px;
  }
  .description-area {
    top: 60px;
  }
  .description-area.mobile {
    top: 50px;
  }
  .description-area.mobile .booking-welcome {
    font-size: 2.5em;
  }
  /* #feature-area {
    box-shadow: 120px -360px 0px 60px #f6f6f6;
  }
  #feature-area.feature-area-information {
    box-shadow: 35px -303px 0px 0px #f6f6f6;
  } */
  .feature-headline {
    font-size: 4.8em;
  }
  #feature-area.feature-area-information {
    top: 90px;
  }
  #feature-area, #feature-area.feature-area-dynamic {
    top: 110px;
  }
  .feature-links {
    top: 120px;
  }
  #office ~ div .feature-links {
    top: 100px;
  }
  #feature-area,
  .feature-links {
    left: 48%;
  }
  #other-info {
    max-width: 450px;
  }
  .service-img {
    width: 44%;
    /* height: 450px; */
  }
  .service-text {
    max-width: 480px;
  }
  .service-text h2 {
    font-size: 2.5em;
  }
  .service-text p {
    font-size: 18px;
  }
  #media-formats {
    margin-top: 1em;
  }
  #information {
    margin-top: 1.1em;
  }
  #lab-features {
    position: relative;
    top: -10px;
  }
  #lab-features li {
    line-height: 1.4;
    margin: 0.4em 1.75em;
  }
  #information-points li {
    line-height: 1.3;
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 20.1%;
  }
  #fallback-msg {
    font-size: 1em;
  }
}

@media only screen and (max-width: 892px) {
  header {
    height: 740px;
  }
  header::before {
    border-bottom: 740px solid #2b64ff;
    border-right: 150px solid transparent;
    border-left: 90px solid #2b64ff;
  }
  header::after {
    border-left: 330px solid transparent;
    border-bottom: 760px solid #2b64ff;
    border-image: linear-gradient(
      285deg,
      #ffffff 52.02%,
      rgba(255, 255, 255, 0) 52.01%
    );
  }
  header.landscape .booking-lab {
    font-size: 4em;
  }
  nav.landscape .lab-links {
    flex-direction: column;
    height: 150px;
    justify-content: space-between;
  }
  nav.landscape.sticky .lab-links {
    flex-direction: row;
    height: unset;
    left: 4.5%;
  }
  nav.landscape .lab-links li {
    font-size: 2.25em;
  }
  nav.landscape.sticky .lab-links li {
    font-size: 1.25em;
  }
  .booking-lab {
    font-size: 4.6em;
  }
  .lab-links li {
    font-size: 1.2em;
  }
  .welcome-section.form {
    height: 775px;
  }
  .welcome-section.form.discovery-form {
    height: 610px;
  }
  .booking-welcome {
    font-size: 2.25em;
  }
  .description-area {
    top: 160px;
  }
  .description {
    max-width: 475px;
  }
  .description.campaign {
    min-height: 332px;
  }
  .description.discovery {
    min-height: 212px;
  }
  .description p,
  .important-items {
    font-size: 0.8em;
  }
  #feature-area.feature-area-information {
    top: 0;
  }
  .feature-image {
    overflow: visible;
    clip-path: polygon(
      0 0,
      60% 0,
      100% calc(30% - 590px),
      calc(70% - 220px) 100%,
      0 100%
    );
  }
  .feature-image::before {
    /* width: 491px;
    right: -216px; */
    width: 380px;
    right: -114px;
    box-shadow: 130px 10px 0px -10px #316cff, 65px 125px 0px -65px inset #f6f6f6,
      35px -95px 0px -78px inset #f6f6f6, 60px 84px 0px 59px #f6f6f6;
  }
  .feature-image::after {
    box-shadow: 340px -100px 0px 100px #f6f6f6;
  }
  #subway::before {
    box-shadow: 173px 30px 0px -30px #316cff, 65px 125px 0px -65px inset #f6f6f6,
      -65px -95px 0px -78px inset #f6f6f6, 61px 84px 0px 60px #f6f6f6;
  }
  #triangle {
    left: 186px;
    border-left: 103px solid transparent;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 179px;
    border-left: 102px solid transparent;
  }
  #gradient.fade {
    left: -230px;
    height: 100%;
    top: 0;
  }
  #gradient.fade::after {
    bottom: 62px;
    right: -350px;
  }
  .feature-headline {
    font-size: 4.1em;
    position: relative;
    top: 90px;
  }
  #media-formats {
    /* top: 70px; */
  }
  #information {
    top: 110px;
  }
  #feature-area,
  .feature-links {
    left: 48%;
  }
  .feature-links {
    top: 170px;
  }
  .feature-links li {
    padding: 1em 1.5em;
  }
  #feature-area {
    top: 70px;
    /* box-shadow: 320px -424px 0px 16px #f6f6f6; */
  }
  #feature-area.feature-area-dynamic {
    top: 100px;
    /* box-shadow: 650px -755px 0px 135px #f6f6f6; */
  }
  #feature-area.feature-area-information {
    /* box-shadow: 109px -596px 0px 0px #f6f6f6; */
  }
  #lab-features {
    position: relative;
    top: 80px;
  }
  #information-points {
    position: relative;
    top: 110px;
    left: -20px;
  }
  #information-points li {
    font-size: 1.1rem;
  }
  #lab-features li {
    line-height: 1.2;
    margin: 0.4em 1em;
  }
  #other-info {
    position: relative;
    top: 100px;
  }
  .service {
    padding: 8em 0 2em 0;
    max-width: 86.78%;
    max-width: 95%;
  }
  .service-text {
    max-width: 420px;
  }
  .service-text h2 {
    font-size: 2.25em;
  }
  .book-link-wrap {
    margin-top: 1em;
  }
  #discovery-area {
    padding: 4em 0;
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 17%;
  }
}
@media only screen and (max-width: 770px) {
  /* header {
    width: 780px;
  } */
  /* header::after {
    right: -300px;
    border-left: 560px solid transparent;
  } */
  .shader-2 {
    top: 700px;
    right: 55%;
  }
  .booking-lab {
    font-size: 4.1em;
  }
  .lab-links {
    flex-direction: column;
    justify-content: space-between;
    height: 110px;
    /* top: 340px;
    left: 13%; */
  }
  .lab-links li {
    font-size: 1.5em;
  }
  nav.sticky {
    height: 165px;
  }
  .booking-welcome {
    font-size: 2.1em;
  }
  .welcome-section {
    /* min-height: 1420px; */
    min-height: 1240px;
  }
  .welcome-section.form {
    min-height: 700px;
  }
  .welcome-section.form.discovery-form {
    min-height: 550px;
  }
  .description-area {
    top: 140px;
  }
  .description {
    max-width: 300px;
  }
  .description p,
  .important-items {
    font-size: 0.75em;
  }
  /* .service-img {
    height: 350px;
  } */
  .feature-section {
    height: 518px;
    /* box-shadow: 230px -2px 0px 2px #316cff;
    box-shadow: 230px 0px 0px 0px #316cff; */
  }
  #feature-area.feature-area-information {
    top: 130px;
  }
  .feature-image {
    width: 420px;
    height: 600px;
    top: -45px;
  }
  .feature-image::before {
    width: 380px;
    height: 578px;
  }
  #entrance {
    background-size: 1090px;
    background-position-x: -480px;
    background-position-y: -15px;
    /* background-repeat: repeat-y; */
  }
  #map {
    background-size: 1010px;
    background-position-x: -354px;
    background-position-y: -226px;
  }
  #subway {
    background-size: 1070px;
    background-position-x: -320px;
  }
  #office {
    background-position-x: -525px;
    background-position-y: -110px;
    background-size: 1260px;
  }
  #pin {
    right: 265px;
  }
  #gradient {
    left: -200px;
  }
  #gradient.fade {
    width: 99%;
    height: 99%;
    background: linear-gradient(
      262deg,
      rgba(0, 0, 0, 0.2) 5.81%,
      rgba(0, 0, 0, 0.137) 8.56%,
      rgba(0, 0, 0, 0) 29.68%
    );
    left: -231px;
    top: -1px;
  }
  #gradient.fade::after {
    bottom: 55px;
    right: -349px;
  }
  #triangle {
    left: 88px;
    border-left: 107px solid transparent;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 79px;
    border-left: 109px solid transparent;
  }
  #feature-area,
  .feature-links {
    left: 50%;
    left: 35%;
  }
  .feature-links {
    top: 100px;
  }
  .feature-links li {
    margin-right: 4px;
    padding: 1em 1.75em;
  }
  #feature-area {
    top: 134px;
    /* box-shadow: 225px -441px 0px 16px #f6f6f6; */
  }
  /* #feature-area.feature-area-dynamic {
    box-shadow: 490px -781px 0px 135px #f6f6f6;
    box-shadow: 490px -809px 0px 135px #f6f6f6;
  }
  #feature-area.feature-area-information {
    box-shadow: 57px -591px 0px 0px #f6f6f6;
  } */
  .feature-headline {
    font-size: 3.5em;
    top: -30px;
  }
  #media-formats {
    top: 10px;
  }
  #information {
    top: -20px;
  }
  #other-info {
    top: -20px;
  }
  .service {
    max-width: 98%;
  }
  .service-text {
    max-width: 330px;
  }
  .service-text p {
    font-size: 1em;
  }
  .service-text h2 {
    font-size: 1.9em;
  }
  .book-link {
    font-size: 1em;
  }
  .book-link::before {
    font-size: 2.25em;
  }
  #lab-features {
    top: 5px;
  }
  #lab-features li {
    font-size: 0.9rem;
  }
  #information-points {
    top: -25px;
  }
  #information-points li {
    font-size: 0.925rem;
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 13%;
  }
}

/* @media only screen and (max-width: 760px) {
  #feature-area {
    box-shadow: 226px -360px 0px 16px #f6f6f6;
    box-shadow: 230px -441px 0px 16px #f6f6f6;
  }
} */

@media only screen and (max-width: 670px) {
  .shader-2 {
    right: 65%;
  }
  header::before {
    border-right: 190px solid transparent;
    border-left: 30px solid #2b64ff;
  }
  header::after {
    border-left: 260px solid transparent;
  }
  .booking-lab {
    font-size: 3.6em;
  }
  .welcome-section {
    /* min-height: 1320px; */
    min-height: 1080px;
  }
  .welcome-section.form.discovery-form {
    min-height: 580px;
  }
  .booking-welcome {
    margin-bottom: 1em;
  }
  .description-area {
    flex-direction: column;
    top: 80px;
  }
  .description {
    min-height: 425px;
    max-width: 480px;
  }
  .description p,
  .important-items {
    font-size: 0.8em;
  }
  #feature-area {
    top: 114px;
  }
  .feature-links {
    top: 110px;
  }
  #feature-area,
  .feature-links {
    left: 37.5%;
  }
  #feature-area.feature-area-dynamic,
  #feature-area.feature-area-information {
    left: 38%;
  }
  #feature-area.feature-area-information {
    top: 85px;
  }
  #office ~ div .feature-links,
  #subway ~ div .feature-links {
    left: 34%;
  }
  .feature-headline {
    top: -10px;
    font-size: 3.6em;
  }
  #media-formats {
    top: 20px;
  }
  #information {
    top: 10px;
    font-size: 3.3em;
  }
  #other-info {
    top: 0px;
  }
  #lab-features {
    top: 10px;
  }
  #lab-features li {
    /* font-size: 0.85rem; */
  }
  #information-points {
    top: 5px;
  }
  #information-points li {
    line-height: 1.3;
  }
  .service-text {
    max-width: 310px;
  }
  .service-text h2 {
    font-size: 1.8em;
  }
  .service-text p {
    font-size: 0.9em;
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 10%;
  }
}

@media only screen and (max-width: 600px) {
  .shader-2 {
    right: 70%;
  }
  .booking-lab {
    font-size: 3.35em;
  }
  .welcome-section {
    /* min-height: 1220px; */
    min-height: 1000px;
  }
  .welcome-section.mobile {
    max-height: unset;
  }
  .welcome-section.form.discovery-form {
    min-height: 550px;
  }
  .description-area {
    top: 60px;
  }
  .service-text {
    max-width: 270px;
  }
  .service-text h2 {
    font-size: 1.6em;
  }
  .service-text p {
    font-size: 0.85em;
  }
  .feature-section {
    /* box-shadow: 330px -2px 0px 2px #316cff; */
    height: 498px;
    height: 411px;
    /* box-shadow: 113px -2px 0px 2px #316cff; */
  }
  /* .feature-section.feature-section-dynamic {
    box-shadow: 330px 8px 0px 2px #316cff;
    box-shadow: 232px 30px 0px -20px #316cff;
  } */
  .feature-image {
    width: 360px;
    /* width: 300px; */
    top: -30px;
  }
  .feature-image::before {
    width: 380px;
    height: 448px;
    right: -129px;
    right: -169px;
    bottom: 192px;
    box-shadow: 138px -10px 0px -17px #316cff,
      65px 125px 0px -65px inset #f6f6f6, 35px -105px 0px -78px inset #f6f6f6,
      60px 84px 0px 60px #f6f6f6;
  }
  #entrance {
    background-size: 890px;
    background-position-x: -375px;
    background-position-y: -35px;
  }
  #map {
    background-size: 890px;
    background-position-x: -314px;
    background-position-y: -226px;
  }
  #subway {
    /* background-size: 750px; */
    background-size: 830px;
    background-position-x: -240px;
  }
  #subway::before {
    box-shadow: 344px 8px 0px -25px #316cff, 65px 125px 0px -65px inset #f6f6f6,
      -65px -95px 0px -78px inset #f6f6f6, 60px 84px 0px 60px #f6f6f6;
    box-shadow: 252px 8px 0px -25px #316cff, 65px 125px 0px -65px inset #f6f6f6,
      -65px -95px 0px -78px inset #f6f6f6, 60px 84px 0px 60px #f6f6f6;
  }
  #subway #gradient::after {
    bottom: 209px;
  }
  #office {
    background-position-x: -445px;
    background-position-y: -140px;
    background-size: 1080px;
  }
  #triangle {
    left: 84px;
    border-left: 70px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 215px solid #2b64ff;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 76px;
    border-left: 70px solid transparent;
  }
  #gradient {
    /* left: -254px; */
    left: -165px;
    height: 78%;
  }
  #gradient::after {
    border-right: 350px solid transparent;
    bottom: 219px;
    right: -350px;
    box-shadow: 0px 30px 0px -1px #f6f6f6;
  }
  #gradient.fade {
    height: 78%;
    left: -190px;
    top: -1px;
    background: linear-gradient(
      256deg,
      rgba(0, 0, 0, 0.2) 5.81%,
      rgba(0, 0, 0, 0.137) 8.56%,
      rgba(0, 0, 0, 0) 29.68%
    );
  }
  #gradient.fade::after {
    bottom: 212px;
    right: -350px;
  }
  #subway #gradient.fade {
    left: -210px;
    top: 0px;
  }
  #subway #gradient.fade::after {
    bottom: 203px;
  }
  #pin {
    right: 175px;
    top: 65px;
  }
  #feature-area {
    top: 124px;
  }
  #feature-area,
  .feature-links {
    left: 32%;
  }
  #feature-area.feature-area-dynamic,
  #feature-area.feature-area-information {
    left: 33%;
  }
  #feature-area.feature-area-information {
    top: 115px;
  }
  .feature-links {
    top: 110px;
  }
  .feature-links li {
    padding: 0.75em 1.75em;
  }
  #office ~ div .feature-links,
  #subway ~ div .feature-links {
    left: 29%;
  }
  .feature-headline {
    font-size: 3em;
    top: -20px;
  }
  /* #address,
  #information {
    top: 10px;
  } */
  #media-formats, #information {
    white-space: nowrap;
    font-size: 2.8em;
    /* top: -20px; */
  }
  #other-info {
    top: 0;
  }
  #lab-features {
    top: 10px;
    font-size: 1em;
  }
  #lab-features li {
    font-size: 0.85rem;
  }
  #information {
    top: -15px;
  }
  #information-points {
    top: -20px;
  }
  #information-points li {
    font-size: 0.85rem;
    line-height: 1.2;
  }
  .book-link {
    font-size: 0.9em;
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 6%;
  }
}

@media only screen and (max-width: 550px) {
  header::before {
    border-right: 150px solid transparent;
    border-left: 10px solid #2b64ff;
  }
  header::after {
    border-left: 190px solid transparent;
    border-image: linear-gradient(
      282deg,
      #ffffff 52.02%,
      rgba(255, 255, 255, 0) 52.01%
    );
  }
  .shader-2 {
    right: 76%;
  }
  .booking-lab {
    font-size: 3em;
  }
  .welcome-section {
    min-height: 500px;
    max-height: 1220px;
  }
  .welcome-section.form {
    min-height: 580px;
  }
  .welcome-section.form.discovery-form {
    min-height: 460px;
  }
  .welcome-section.mobile {
    max-height: 1360px;
  }
  .description-area {
    top: -3%;
  }
  .description {
    min-height: 395px;
    width: 100%;
  }
  .booking-welcome {
    font-size: 1.8em;
  }
  .service-text {
    max-width: 250px;
  }
  .service-text h2 {
    font-size: 1.5em;
  }
  .feature-section {
    height: 322px;
    /* box-shadow: 437px 2px 0px 47px #316cff, 160px 20px 0px 14px inset #f6f6f6;
    box-shadow: 337px 49.5px 0px -0.7px #316cff,
      160px 20px 0px 4px inset #f6f6f6; */
  }
  .feature-section.feature-section-dynamic {
    /* box-shadow: 330px 57px 0px 2px #316cff;
    box-shadow: 430px 54.5px 0px 4.5px #316cff; */
  }
  #feature-area.feature-area-dynamic {
    top: 95px;
    left: 31%;
  }
  .feature-links {
    top: 90px;
  }
  #office ~ div .feature-links,
  #subway ~ div .feature-links {
    left: 30%;
  }
  #feature-area,
  .feature-links {
    left: 32%;
  }
  .feature-links li {
    padding: 0.45em 1.2em;
    margin-right: 8px;
  }
  .feature-image {
    width: 320px;
  }
  .feature-image::before {
    right: -189px;
    bottom: 232px;
    box-shadow: 138px -10px 0px -17px #316cff,
      65px 165px 0px -65px inset #f6f6f6, 35px -105px 0px -78px inset #f6f6f6,
      59px 84px 0px 60px #f6f6f6;
    box-shadow: 138px -10px 0px -17px #316cff,
      65px 165px 0px -65px inset #f6f6f6, 35px -105px 0px -78px inset #f6f6f6,
      79px 614px 0px 193px #f6f6f6;
    width: 350px;
  }
  .feature-image::after {
    width: 41px;
    height: 100px;
    right: 5px;
    top: -40px;
  }
  #entrance {
    background-size: 740px;
    background-position-x: -315px;
    background-position-y: -35px;
  }
  #map {
    background-size: 890px;
    background-position-x: -334px;
    background-position-y: -236px;
  }
  #subway {
    background-size: 680px;
    background-position-x: -220px;
  }
  #subway::before {
    box-shadow: 235px 4px 0px -21px #316cff, -15px 125px 0px -25px inset #f6f6f6,
      35px 5px 0px -78px inset #f6f6f6, 51px 84px 0px 50px #f6f6f6;
    width: 340px;
  }
  #subway::after {
    right: -23px;
    transform: skewX(156deg) translateX(-27px);
  }
  #subway #gradient {
    left: -148px;
  }
  #subway #gradient::after {
    right: -334px;
    bottom: 249px;
    border-right: 333px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: 300px solid #2b64ff;
  }
  #subway ~ div .feature-links {
    top: 60px;
  }
  #office {
    background-position-x: -302px;
    background-position-y: -30px;
    background-size: 730px;
  }
  #office::before {
    right: -189px;
    bottom: 232px;
    box-shadow: 138px -10px 0px -17px #316cff,
      65px 165px 0px -65px inset #f6f6f6, 35px -105px 0px -78px inset #f6f6f6,
      193px 614px 0px 193px #f6f6f6;
  }
  #triangle {
    left: 81px;
    border-left: 68px solid transparent;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 74px;
    border-left: 68px solid transparent;
  }
  #pin {
    right: 125px;
    top: 55px;
  }
  #gradient {
    left: -150px;
    height: 64%;
  }
  #gradient::after {
    bottom: 259px;
    right: -333px;
    border-right: 333px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: 325px solid #2b64ff;
  }
  #gradient.fade {
    left: -150px;
    height: 64%;
  }
  #subway #gradient.fade {
    left: -174px;
    top: 0px;
  }
  #gradient.fade::after {
    bottom: 252px;
    right: -332px;
  }
  #subway #gradient.fade::after {
    bottom: 243px;
  }

  #office ~ div .feature-links {
    top: 70px;
    left: 31%;
  }
  #other-info {
    max-width: 330px;
    line-height: 1.3;
    font-size: 0.9em;
  }
  #google-maps {
    font-size: 0.9em;
  }
  #address,
  #information {
    max-width: 300px;
  }
  #address,
  #other-info,
  #information {
    top: -40px;
    left: 5px;
  }
  #media-formats {
    top: -20px;
    font-size: 2em;
  }
  #information {
    font-size: 2.25em;
    top: -45px;
    white-space: nowrap;
  }
  #information-points {
    top: -50px;
    left: 0;
  }
  #information-points li {
    font-size: 0.75rem;
    line-height: 1.15;
  }
  .feature-headline {
    font-size: 2.5em;
    left: 15px;
  }
  #lab-features {
    max-width: 350px;
    left: 15px;
    top: -25px;
  }
  #lab-features li {
    margin: 0.2em 1.75em;
    line-height: 1.1;
  }
  .service {
    max-width: 100%;
  }
  #frame-wrap::before,
  #frame-wrap::after,
  #object-wrap::before,
  #object-wrap::after {
    width: 3%;
  }
}

@media only screen and (max-width: 499px) {
  body.mobile {
    /* min-width: 540px; */
  }
  header {
    height: 680px;
  }
  header::before {
    border-bottom: 680px solid #2b64ff;
  }
  header.sticky.mobile::before {
    left: -110px;
    border-right: 190px solid transparent;
  }
  header::after {
    right: -43px;
    right: 0;
  }
  header.mobile::after {
    right: 0;
  }
  #xlabs-logo {
    top: 62px;
  }
  #lab-hero {
    /* width: 95%; */
    width: 485px;
    width: 89.8%;
    top: 485px;
  }
  #xlabs-logo,
  .booking-lab,
  #lab-hero,
  .lab-links,
  .description-area {
    left: 5%;
  }
  .booking-lab {
    line-height: 60px;
    white-space: nowrap;
    font-size: 2.75em;
    top: 160px;
  }
  .lab-links {
    left: 6.5%;
    top: -70px;
    height: 140px;
  }
  .lab-links li {
    margin-right: 0;
    white-space: nowrap;
    font-size: 2em;
  }
  nav.sticky .lab-links {
    top: 10px;
  }
  .shader-2 {
    right: 54%;
    /* right: 30%; */
    top: 680px;
    width: 130px;
    transform: matrix(0.92, 0, -0.39, 1, 0, 0) skew(5deg, 0deg);
  }
  .welcome-section.mobile {
    max-height: 1420px;
  }
  .welcome-section.mobile.landscape {
    min-height: 1500px;
  }
  .welcome-section.form {
    min-height: 630px;
  }
  .welcome-section.form.discovery-form {
    min-height: 530px;
  }
  .description-area {
    padding-bottom: 6em;
  }
  #other-info {
    font-size: 0.8em;
    max-width: 300px;
  }
  #entrance {
    background-position-x: -325px;
  }
  #subway {
    background-position-x: -195px;
  }
  /* #subway::before {
    box-shadow: 313px -7px 0px -10px #316cff,
      -15px 125px 0px -25px inset #f6f6f6, -65px -95px 0px -78px inset #f6f6f6,
      61px 84px 0px 60px #f6f6f6;
  } */
  #subway ~ div .feature-links {
    top: 40px;
    left: 33%;
  }
  #office ~ div .feature-links {
    top: 60px;
    left: 32%;
  }
  #gradient.fade {
    left: -153px;
    height: 64%;
  }
  #feature-area {
    top: 120px;
  }
  .feature-links {
    top: 80px;
    font-size: 0.9em;
  }
  #feature-area,
  .feature-links {
    left: 33%;
  }
  #feature-area.feature-area-dynamic {
    top: 55px;
    left: 33%;
  }
  #feature-area.feature-area-information {
    top: 110px;
    left: 36%;
  }
  #information {
    font-size: 2em;
  }
  #media-formats {
    top: -7px;
  }
  #lab-features {
    top: -15px;
  }
  #lab-features li {
    margin: 0.2em 1.75em;
  }
  #information {
    top: -45px;
  }
  #information-points {
    top: -45px;
  }
  #address,
  #other-info,
  #information {
    left: 0;
  }
  .service-section.mobile {
    padding: 0 0.5em;
  }
}

@media only screen and (max-width: 470px) {
  .feature-links {
    font-size: 0.8em;
  }
  #feature-area,
  .feature-links {
    left: 37%;
  }
  /* #feature-area.feature-area-information {
    left: 35%;
  } */
  #office ~ div .feature-links {
    left: 33%;
    top: 50px;
  }
  #subway ~ div .feature-links,
  #feature-area.feature-area-dynamic {
    left: 34%;
  }
  #information,
  #media-formats {
    font-size: 1.8em;
  }
  #feature-area.feature-area-information {
    top: 100px;
  }
}

@media only screen and (max-width: 435px) {
  #lab-hero {
    min-height: 216px;
    top: 505px;
  }
  .booking-lab {
    font-size: 2.3em;
  }
  .lab-links li {
    font-size: 1.8em;
  }
  .welcome-section.mobile {
    max-height: unset;
  }
  .shader-2 {
    right: 64%;
    top: 680px;
  }
  .feature-links {
    font-size: 0.75em;
  }
  #feature-area,
  .feature-links {
    left: 35%;
  }
  .feature-image {
    width: 300px;
    clip-path: polygon(
      0 0,
      56% 0,
      100% calc(30% - 590px),
      calc(70% - 220px) 100%,
      0 100%
    );
  }
  #triangle {
    left: 66px;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 57px;
  }
  #information,
  #media-formats {
    font-size: 1.7em;
  }
  .book-link {
    white-space: nowrap;
  }
  .book-link {
    white-space: nowrap;
    font-size: 0.75em;
  }
  .book-link::before {
    margin-right: 0.25rem;
    font-size: 2em;
  }
}

@media only screen and (max-width: 400px) {
  .booking-lab {
    font-size: 2.2em;
  }
  .lab-links li {
    font-size: 1.65em;
  }
  .description-area.mobile {
    top: -20px;
  }
  #feature-area,
  .feature-links {
    left: 33%;
  }
  #office ~ div .feature-links {
    left: 32%;
  }
  .feature-image {
    width: 280px;
  }
  #triangle {
    left: 52px;
    border-left: 64px solid transparent;
  }
  #subway ~ #triangle,
  #office ~ #triangle {
    left: 43px;
    border-left: 65px solid transparent;
  }
  #information-points li {
    line-height: 1.1;
  }
  #lab-features li {
    line-height: 1.05;
  }
  #subway ~ div .feature-links,
  #feature-area.feature-area-dynamic {
    left: 32%;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(80%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-80%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
    /* opacity: 0.75; */
  }
  50%,
  100% {
    top: 24px;
    height: 32px;
    /* opacity: 1;  */
  }
}