/* SHAPE STUFF */
.shapes-grid {
  height: calc(var(--shape-half-size) * 4);
  position: relative;
  width: calc(var(--shape-half-size) * 8);
  max-width: 100%;
  margin: -30px auto 0;
  z-index: 0;
}

.shapes-grid::before {
  content: "";
  display: block;
  position: absolute;
  right: calc(50% + var(--shape-h-size) + var(--shape-h-size));
  width: 100vw;
  height: 100%;
  bottom: 0;
  background-image: url("../../images/header-outer-left-shapes.svg");
  background-position: right center;
  background-size: contain;
  opacity: 0;
  transform: translate3d(0, var(--shape-half-size), 0);
}

.shapes-grid::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% + var(--shape-h-size) + var(--shape-h-size));
  width: 100vw;
  height: 100%;
  bottom: 0;
  background-image: url("../../images/header-outer-right-shapes.svg");
  background-position: left center;
  background-size: contain;
  opacity: 0;
  transform: translate3d(0, var(--shape-half-size), 0);
}

body.loaded .shapes-grid::before,
body.loaded .shapes-grid::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1s, transform 2s;
}

/* DOWN ARROW */
.next-section-button {
  display: block;
  position: absolute;
  top: calc(var(--shape-half-size) * 1.35);
  left: 50%;
  transform: translate3d(-50%, 0, 0) scale(0);
  z-index: 10;
}

body.loaded .next-section-button {
  transform: translate3d(-50%, 0, 0) scale(1);
  transition: transform 1.25s;
}

body.loaded .next-section-button:hover {
  transition: transform 0.3s;
  transform: translate3d(-50%, 0, 0) scale(1.1);
}

/* GENERAL SHAPE SIZES */
.shapes-grid > *:not(.next-section-button) {
  width: var(--shape-h-size);
  height: var(--shape-h-size);
  position: absolute;
}

.shapes-grid > div:not(.next-section-button) {
  opacity: 0;
  transform: translate3d(0, var(--shape-half-size), 0);
}

body.loaded .shapes-grid > div:not(.next-section-button):nth-child(even) {
  transition: opacity 1s, transform 2.25s;
}

body.loaded .shapes-grid > div:not(.next-section-button) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1s, transform 2s;
}

/* HOME SHAPES */
.shape-1 {
  top: 0;
  right: calc(50% + var(--shape-h-size) + var(--shape-half-size));
  background: #b6e9ff;
}

.shape-2 {
  top: 0;
  right: calc(50% + var(--shape-h-size));
}

.shape-3 {
  top: 0;
  left: calc(50% + var(--shape-h-size));
  z-index: 2;
}

.shape-4 {
  top: 0;
  left: calc(50% + var(--shape-h-size));
}

.shape-5 {
  top: 0;
  left: calc(50% + var(--shape-h-size) + var(--shape-half-size));
  background: linear-gradient(221.99deg, #9685ff 14.49%, #61bcff 80.5%);
}

.shape-6 {
  top: var(--shape-half-size);
  right: calc(50% + var(--shape-h-size));
}

.shape-7 {
  top: var(--shape-half-size);
  left: calc(50% + var(--shape-half-size));
  background: #dbebfb;
}

.shape-8 {
  top: calc(var(--shape-half-size) * 2);
  right: calc(50% + var(--shape-h-size));
  z-index: 2;
}

.shape-9 {
  top: calc(var(--shape-half-size) * 2);
  right: calc(50% + var(--shape-half-size));
}

.shape-10 {
  top: calc(var(--shape-half-size) * 2);
  right: 50%;
}

.shape-11 {
  top: calc(var(--shape-half-size) * 2);
  left: 50%;
}

.shape-12 {
  top: calc(var(--shape-half-size) * 2);
  left: calc(50% + var(--shape-half-size));
}

.shape-13 {
  top: calc(var(--shape-half-size) * 2);
  left: calc(50% + var(--shape-h-size) + var(--shape-half-size));
}

.shape-14 {
  top: calc(var(--shape-half-size) * 3);
  right: calc(50% + var(--shape-h-size) + var(--shape-half-size));
  background: linear-gradient(221.99deg, #bb1579 14.49%, #f7351e 80.5%);
}

.shape-15 {
  top: calc(var(--shape-half-size) * 3);
  right: 50%;
}

.shape-16 {
  top: calc(var(--shape-half-size) * 3);
  left: 50%;
  background: #ffeaca;
}

.shape-17 {
  top: calc(var(--shape-half-size) * 3);
  left: 50%;
  z-index: 2;
}

.shape-18 {
  top: calc(var(--shape-half-size) * 3);
  left: calc(50% + var(--shape-h-size));
}

.shape-19 {
  top: calc(var(--shape-half-size) * 3);
  left: calc(50% + var(--shape-h-size) + var(--shape-half-size));
  background: #b6e9ff;
}

/* -- MEDIA QUERIES -- */

/* HEIGHT LESS THAN 900 + WIDTH GREATER THAN 850 */

@media only screen and (min-width: 850px) and (max-height: 900px) {
  body.loaded #become-a-future-ready-business-with-a-forward-thinking-partner.home-title {
    font-size: clamp(35px, 5vw, 50px) !important;
    max-width: 750px;
  }

  .next-section-button {
    display: block;
    position: absolute;
    top: calc(var(--shape-half-size) * 0.8);
  }
}

/* 850 */
@media only screen and (max-width: 850px) {
  .next-section-button {
    top: calc(var(--shape-half-size) * 0.3);
  }

  .next-section-button img {
    width: 50px;
  }

  #page-container {
    overflow-x: hidden;
  }

  .shape-3 {
    left: calc(23% + var(--shape-h-size));
  }

  .shape-3 path {
    stroke-width: 0;
  }

  .shape-6 {
    right: calc(22.5% + var(--shape-h-size));
  }

  .shape-18 {
    left: calc(22.5% + var(--shape-h-size));
  }
}

@media only screen and (max-width: 360px) {
  /* Mobile Samsung */
  .shape-3 {
    left: calc(20% + var(--shape-h-size));
  }

  .shape-3 path {
    stroke-width: 0;
  }

  .shape-6 {
    right: calc(20% + var(--shape-h-size));
  }

  .shape-18 {
    left: calc(20% + var(--shape-h-size));
  }
}
@media only screen and (min-width: 361px) and (max-width: 390px) {
  .shape-3 {
    left: calc(23% + var(--shape-h-size));
  }

  .shape-3 path {
    stroke-width: 0;
  }

  .shape-6 {
    right: calc(22.5% + var(--shape-h-size));
  }

  .shape-18 {
    left: calc(22.5% + var(--shape-h-size));
  }
}

@media only screen and (min-width: 391px) and (max-width: 430px) {
  .shape-3 {
    left: calc(25% + var(--shape-h-size));
  }

  .shape-3 path {
    stroke-width: 0;
  }

  .shape-6 {
    right: calc(25% + var(--shape-h-size));
  }

  .shape-18 {
    left: calc(25% + var(--shape-h-size));
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.shapes-grid text a {
  opacity: 0;
}

body.loaded .shapes-grid text a {
  text-decoration: none;
  font-weight: 400;
  opacity: 1;
  -webkit-animation: fadeIn 3s ease-in;
  -moz-animation: fadeIn 3s ease-in;
  -o-animation: fadeIn 3s ease-in;
  -ms-animation: fadeIn 3s ease-in;
  animation: fadeIn 3s ease-in;
}

svg text.first {
  animation: fadeIn 4s ease-in infinite alternate;
}

svg text.second,
.shape-2 img.first {
  animation: fadeIn 7s ease-in infinite alternate;
}

svg text.third,
.shape-12 img.second {
  animation: fadeIn 10s ease-in infinite alternate;
}

svg:hover text,
.shape-with-image:hover img {
  opacity: 1;
  animation: fadeOut 1s step-end infinite;
  fill: #6100ff;
}

svg:hover text a {
  fill-opacity: 1;
  fill: #6100ff;
}

svg:hover .shape-outline-ani {
  fill: #f4f4f4;
  stroke: #f4f4f4;
}

svg.shape-8:hover,
svg.shape-3:hover {
  z-index: -9 !important;
}

.shape-4:hover,
.shape-9:hover {
  z-index: 9 !important;
}

svg.shape-17:hover .shape-outline-ani {
  fill: none;
}