/* SHAPE STUFF */
.careers-shapes-grid {
  position: relative;
  height: 800px;
  width: 100%;
}

.inner-careers-shapes-grid {
  height: calc(var(--shape-half-size) * 7);
  position: absolute;
  width: calc(var(--shape-half-size) * 9);
  max-width: 100%;
  margin: -30px auto 0;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate3d(-45%, -50%, 0);
}

.top-right-shape-cover {
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  z-index: 1;
}

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

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

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

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

/* CAREER SHAPES */
.career-shape-1 {
  top: 0;
  left: calc(50% + (var(--shape-half-size) * 3));
}

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

.career-shape-3 {
  top: calc(var(--shape-half-size) * 2);
  left: calc(50% - var(--shape-half-size));
  transform: rotate(180deg);
}

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

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

.career-shape-6 {
  top: calc(var(--shape-half-size) * 3);
  left: calc(50% - (var(--shape-half-size) * 5));
}

.career-shape-7 {
  top: calc(var(--shape-half-size) * 3);
  left: calc(50% - (var(--shape-half-size) * 4));
}

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

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

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

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

.career-shape-12 {
  top: calc(var(--shape-half-size) * 4);
  left: calc(50% - (var(--shape-half-size) * 4));
  background: #e39d56;
}

.career-shape-13 {
  top: calc(var(--shape-half-size) * 4);
  left: calc(50% - (var(--shape-half-size) * 3));
  transform: rotate(-90deg) translate3d(50%, 25%, 0);
}

.career-shape-14 {
  top: calc(var(--shape-half-size) * 4);
  left: calc(50% - var(--shape-half-size));
}

.career-shape-15 {
  top: calc(var(--shape-half-size) * 4);
  left: 50%;
}

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

.career-shape-17 {
  top: calc(var(--shape-half-size) * 5);
  left: calc(50% - (var(--shape-half-size) * 5));
  background: #fafafa;
}

.career-shape-18 {
  top: calc(var(--shape-half-size) * 5);
  left: calc(50% - (var(--shape-half-size) * 3));
  background: #fafafa;
}

.career-shape-19 {
  top: calc(var(--shape-half-size) * 5);
  left: calc(50% - (var(--shape-half-size) * 1));
  background: #fafafa;
}

.career-shape-20 {
  top: calc(var(--shape-half-size) * 5);
  left: 50%;
  background: #fafafa;
}

/* -- MEDIA QUERIES -- */

/* 850 */
@media only screen and (max-width: 850px) {
  .careers-shapes-grid {
    height: 500px;
  }
}