/* ==========================================================================
   GLOBAL
   ========================================================================== */
body {
  background-color: #000;
}
html.no-scroll, body.no-scroll {
  overflow: hidden;
  height: 100%;
}
/* ==========================================================================
   MAIN SECTIONS
   ========================================================================== */
#main-section {
  background: #000;
}
#header-space {
  height: 0 !important;
}
#black-section, #pink-section, #blue-section, #yellow-section {
  position: relative;
  min-height: 100vh;
}
/* ==========================================================================
   LOGO
   ========================================================================== */
#logo-section {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 9999;
}
#logo-section.fade-out {
  pointer-events: none;
}
/* ==========================================================================
   STICKY DIVIDER LINE
   ========================================================================== */
#sticky-line {
  position: fixed;
  bottom: 50px;
  left: 1%;
  width: 98%;
  z-index: 999;
  opacity: 1;
}
#sticky-line .divider-border {
  background-color: #000;
}
#sticky-line.line-white .divider-border {
  background-color: #fff;
}
#sticky-line.line-hidden {
  opacity: 0;
}


/* ==========================================================================
   SHARED TYPOGRAPHY / ANIMATION ELEMENTS
   ========================================================================== */
.we-believe, .we-are, .we-care, .we-are-fiercely {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: clamp(60px, 8vw, 140px);
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity;
  z-index: 100;
  pointer-events: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.flickity-enabled  {
  position: fixed !important;
  left: 1%;
   width: 98%;
  top: 85%;
  opacity: 0;
  z-index: 99999;
  pointer-events: auto;
}
/* ==========================================================================
   INDIVIDUAL TEXT STATES
   ========================================================================== */
.we-believe {
  top: 50%;
  color: #fff;
}
.we-are {
  top: 80%;
  opacity: 0;
}
.we-care {
  top: 80%;
  opacity: 0;
}
.we-are-fiercely {
  top: 80%;
  opacity: 0;
}

/* ==========================================================================
   VERTICAL LINES
   ========================================================================== */
.vertical-line {
  position: fixed;
  left: 50%;
  width: 1.5px;
  height: 20vh;
  margin: 0 auto;
  background: #000;
  z-index: 999;
  opacity: 0;
}
.vertical-line.vertical-line-one {
  top: 20%;
}
.vertical-line.vertical-line-two {
  top: 20%;
}

.horizontal-line {
  position: fixed;
  left: 2%;
  width: 96%;
  height: 1px;
  top: 83%;
  background: #000;
  z-index: 999;
  opacity: 0;
}

/* ==========================================================================
   CASE STUDY CARDS
   DESKTOP
   ========================================================================== */

@media only screen and (min-width: 1000px) {
  #case-study-one-trigger,
  #case-study-two-trigger,
  #case-study-three-trigger,
  #case-study-four-trigger {
    border-radius: 20px;
    overflow: hidden;
  }

}

/* ==========================================================================
   CASE STUDY CARDS
   MOBILE
   ========================================================================== */

@media only screen and (max-width: 999px) {
  #case-study-one-trigger,
  #case-study-two-trigger,
  #case-study-three-trigger,
  #case-study-four-trigger {
    border-radius: 0;
    overflow: visible;
  }

  #case-study-one-trigger .vc_col-sm-6:first-child,
  #case-study-two-trigger .vc_col-sm-6:first-child,
  #case-study-three-trigger .vc_col-sm-6:first-child,
  #case-study-four-trigger .vc_col-sm-6:first-child {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }

  #case-study-one-trigger .vc_col-sm-6:last-child,
  #case-study-two-trigger .vc_col-sm-6:last-child,
  #case-study-three-trigger .vc_col-sm-6:last-child,
  #case-study-four-trigger .vc_col-sm-6:last-child {
    border-radius: 0 0 20px 20px;
    overflow: hidden;
  }

}

@media only screen and (max-width: 999px) {
  .col,
  body .vc_row-fluid .wpb_column {
    margin-bottom: 0 !important;
  }

}