/* --------------------------------------------------------------------------
SHARED STYLES
-----------------------------------------------------------------------------*/
/* ======  SVGs IN SWIPER WRAPPERS  ====== */
.svg-wrapper {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

/* --------------------------------------------------------------------------
ANIMATION HELPERS
-----------------------------------------------------------------------------*/
.pre-loaded {
  opacity: 0;
}


/* --------------------------------------------------------------------------
TEXT WATERFALL EFFECTS
-----------------------------------------------------------------------------*/
[class*="js-text-item"] {
  opacity: 0;
  transform: translateY(14px);
  transition: all .5s ease-in-out;
}

.js-image-item {
  opacity: 0;
  transform:  translateY(30px);
  transition: all .8s ease-in-out;
}

.slide-up [class*="js-text-item"],
.slide-up [class*="js-image-item"],
.slide-up[class*="js-text-item"],
.slide-up[class*="js-image-item"] {
  opacity: 1;
  transform:  translateY(0);
}

.text-animation-delayed [class*="js-text-item"] {
  transition: all .8s ease-in-out .9s;
}

.text-animation-delayed .js-image-item {
  transition: all 1s ease-in-out .9s;
}

@media only screen and (max-width: 767px) {
  [class*="js-text-item"] {
    transition: all 1.3s ease-out;
  }

  .js-image-item {
    transition: all 1.3s ease-out;
    transform:  translateY(14px);
  }
  .text-animation-delayed [class*="js-text-item"] {
    transition: all 1.3s ease-out .9s;
  }

  .text-animation-delayed .js-image-item {
    transition: all 1.3s ease-out .9s;
  }

  .coming-soon-banner {
    padding-bottom: 0 !important;
  }

  .coming-soon-banner .container {
    position: absolute !important;
    top: 6% !important;
  }
}


.js-text-item-1,
.js-image-item {
  transition-delay: .3s;
}
.js-text-item-2 {
  transition-delay: .45s;
}
.js-text-item-3 {
  transition-delay: .6s;
}
.js-text-item-4 {
  transition-delay: .75s;
}
.js-text-item-5 {
  transition-delay: .9s;
}
.js-text-item-5 {
  transition-delay: 1s;
}

/* --------------------------------------------------------------------------
GRAPH LINES & DOTS
-----------------------------------------------------------------------------*/
.graph-line {
  opacity: 0;
}

.graph-line.loaded {
  opacity: 1;
}


[class*="graph-dot"] {
  opacity: 0;
}

.animate-dots {
  animation-name: fade;
  animation-duration: 0;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.graph-dot-1 { animation-delay: 0; }
.graph-dot-2 { animation-delay: 500ms; }
.graph-dot-3 { animation-delay: 750ms; }
.graph-dot-4 { animation-delay: 1250ms; }
.graph-dot-5 { animation-delay: 1450ms; }



/* ==============   PREVIEW  ============== */
.version-2 .graph-dot-1 { animation-delay: 0; }
.version-2 .graph-dot-2 { animation-delay: 1000ms; }
.version-2 .graph-dot-3 { animation-delay: 1500ms; }
.version-2 .graph-dot-4 { animation-delay: 2500ms; }
.version-2 .graph-dot-5 { animation-delay: 2900ms; }
/* ==============   END PREVIEW  ============== */

.anti-fraud-hero .graph-dot-1 { animation-delay: 0; }
.anti-fraud-hero .graph-dot-2 { animation-delay: 500ms; }
.anti-fraud-hero .graph-dot-3 { animation-delay: 800ms; }
.anti-fraud-hero .graph-dot-4 { animation-delay: 950ms; }
.anti-fraud-hero .graph-dot-5 { animation-delay: 1100ms; }
.anti-fraud-hero .graph-dot-6 { animation-delay: 1250ms; }
.anti-fraud-hero .graph-dot-7 { animation-delay: 1620ms; }
.anti-fraud-hero .graph-dot-8 { animation-delay: 1860ms; }

.careers-hero-illo-wrapper .graph-dot-1 { animation-delay: 0; }
.careers-hero-illo-wrapper .graph-dot-2 { animation-delay: 400ms; }
.careers-hero-illo-wrapper .graph-dot-3 { animation-delay: 800ms; }
.careers-hero-illo-wrapper .graph-dot-4 { animation-delay: 950ms; }
.careers-hero-illo-wrapper .graph-dot-5 { animation-delay: 1250ms; }
.careers-hero-illo-wrapper .graph-dot-6 { animation-delay: 1600ms; }
.careers-hero-illo-wrapper .graph-dot-7 { animation-delay: 1900ms; }


/* --------------------------------------------------------------------------
HOME HERO
-----------------------------------------------------------------------------*/
/* ==============   PHONE APPS  ============== */
.home-hero-outer-wrapper {
  padding-bottom: 60%;
  position: relative;
  height: 0;
  width: 100%;
  overflow: hidden;
}


.home-hero-illo-wrapper {
  position: absolute;
  top: 0;
  left: -3%;
  width: 120%;
}


.app-icon {
  position: absolute;
}

.animated.home-hero-illo-wrapper .app-icon {
  transform: translateY(-4px);
  opacity: 0;
  animation-name: fadeAndScale, floatingReverse;
  animation-duration: 400ms, 3000ms;
  animation-timing-function: ease-in, ease-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
  transform-origin: center;
}

.animated.home-hero-illo-wrapper .icon-1 {
  animation-delay: 0s, 2200ms;
  animation-name: fadeAndScale, floating;
  top: 8%;
  right: 42.5%;
  width: 3.1%;
}
.animated.home-hero-illo-wrapper .icon-2 {
  animation-delay: 300ms, 2600ms;
  animation-name: fadeAndScale, floating;
  top: 13.5%;
  right: 36.5%;
  width: 4.2%;
}
.animated.home-hero-illo-wrapper .icon-3 {
  top: 17.5%;
  right: 44.5%;
  animation-delay: 600ms, 2000ms;
  animation-name: fadeAndScale, floatingReverse;
  width: 3.3%;
}
.animated.home-hero-illo-wrapper .icon-4 {
  top: 23.5%;
  right: 34%;
  animation-delay: 800ms, 2400ms;
  animation-name: fadeAndScale, floatingReverse;
  width: 3.5%;
}
.animated.home-hero-illo-wrapper .icon-5 {
  top: 25%;
  right: 40.5%;
  animation-delay: 1000ms, 2600ms;
  animation-name: fadeAndScale, floating;
  width: 4.4%;
}
.animated.home-hero-illo-wrapper .icon-6 {
  top: 33.4%;
  right: 35.6%;
  animation-delay: 1200ms, 2000ms;
  animation-name: fadeAndScale, floating;
  width: 4.6%;
}
.animated.home-hero-illo-wrapper .icon-7 {
  top: 34%;
  right: 44.5%;
  animation-delay: 1400ms, 2400ms;
  animation-name: fadeAndScale, floatingReverse;
  width: 3.5%;
}
.animated.home-hero-illo-wrapper .icon-8 {
  top: 43%;
  right: 41.9%;
  animation-delay: 1600ms, 2600ms;
  animation-name: fadeAndScale, floating;
  width: 4.5%;
}

.animated.home-hero-illo-wrapper .icon-9 {
  top: 47%;
  right: 36.8%;
  animation-delay: 1800ms, 2000ms;
  animation-name: fadeAndScale, floatingReverse;
  width: 3.4%;
}




/* ==============   CUSTOM COMBINED SOLUTIONS  ============== */
.custom-combined-solutions svg {
  width: 100%; /* Fix for tablet layout breaking */
}

.js-ccs-items .mobile-ad-tech,
.js-ccs-items .mobile-ad-agency,
.js-ccs-items .mobile-ad-network {
  transform: matrix(1, 0, 0, 1, 14, 0);
  opacity: 0;
}

@media only screen and (min-width: 767px) {
  .js-ccs-items.animate .mobile-ad-tech,
  .js-ccs-items.animate .mobile-ad-agency,
  .js-ccs-items.animate .mobile-ad-network {
    transform: matrix(1, 0, 0, 1, 14, 0);
    opacity: 0;
    animation-name: slideLeft;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
}

@media only screen and (max-width: 767px) {
  .js-ccs-items .mobile-animate.mobile-ad-tech,
  .js-ccs-items .mobile-animate.mobile-ad-agency,
  .js-ccs-items .mobile-animate.mobile-ad-network {
    transform: matrix(1, 0, 0, 1, 14, 0);
    opacity: 0;
    animation-name: slideLeft;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
}

.js-ccs-svg .mobile-ad-tech,
.js-ccs-svg .mobile-ad-agency,
.js-ccs-svg .mobile-ad-network {
  opacity: 0;
  transform: scale(.7, .7);
}


.js-ccs-svg.animate .mobile-ad-tech,
.js-ccs-svg.animate .mobile-ad-agency,
.js-ccs-svg.animate .mobile-ad-network {
  opacity: 0;
  transform: scale(.7, .7);
  transform-origin: center;
  animation-name: fadeAndScale;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.animate .mobile-ad-tech {
  animation-delay: .2s;
}

.animate .mobile-ad-agency {
  animation-delay: .7s;
}

.animate .mobile-ad-network {
  animation-delay: 1.2s;
  transform-origin: center;
}

/* ==============   DATA DRIVEN  ============== */
.data-driven-pin {
  transform-origin: center;
  animation-name: subtleFloating;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.data-driven-illo {
  max-width: 44%;
  margin-left: auto;
  margin-right: auto;
}


/* ==============   TRANSPARENT SUPPLY  ============== */
.globe-wrapper {
  position: relative;
  max-width: 81%;
  transform: translate(-13%, 4%);
  margin: 0 auto;
}

.globe-with-pins {
  position: relative;
  z-index: 4;
}

.rotating-circles {
  position: absolute;
  top: -9px;
  right: -3px;
  width: 39%;
  transform-origin: center;
  animation-name: rotate;
  animation-duration: 25s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

[class^="pin"],
[class^="story-pin"] {
  transform: rotate(0deg) scaleY(0.6);
  opacity: 0;
  position: absolute;
  width: 35px;

}

.animate [class^="pin"],
.animate [class^="story-pin"] {
  animation-name: hatch;
  -webkit-animation-name: hatch;
  animation-duration: .85s;
  -webkit-animation-duration: .85s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

.pin-1 {
  left: 36%;
  z-index: 8;
  top: 22%;
  width: 35px;
  animation-delay: 2.8s;
}

.pin-2 {
  left: 69%;
  z-index: 8;
  top: 29%;
  width: 18px;
  animation-delay: 2s;
}

.pin-3 {
  left: 79%;
  z-index: 8;
  top: 7%;
  width: 26px;
  animation-delay: 2.4s;
}

/* ==============   EXPERT TEAM  ============== */
.expert-team-illo-wrapper {
  margin: 0 auto;
  position: relative;
  max-width: 45%;
  margin-top: 5%;
}

.expert-team-illo-wrapper .chat-bubble {
  position: absolute;
  top: -10%;
  right: 23%;
  width: 30%;
  transform: scale(.3);
  opacity: 0;
}

.animate .chat-bubble {
  transform: scale(1);
  opacity: 1;
  opacity: 0;
  animation-name: fadeAndScale;
  animation-duration: 400ms;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  transform-origin: center;
}

.chat-dots circle {
  opacity: 0;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-delay: 3s;
}

.chat-dots .dot-1 {
  animation-name: cycleOne;

}
.chat-dots .dot-2 {
  animation-name: cycleTwo;
}
.chat-dots .dot-3 {
  animation-name: cycleThree;
}


@-webkit-keyframes cycleOne {
  0% {
    opacity: .4;
  }
  33.333% {
    opacity: 1;
  }
  66.6667% {
    opacity: .4;
  }
  100% {
    opacity: .4;
  }
}

@-webkit-keyframes cycleTwo {
  0% {
    opacity: .4;
  }
  33.333% {
    opacity: .4;
  }
  66.6667% {
    opacity: 1;
  }
  100% {
    opacity: .4;
  }
}

@-webkit-keyframes cycleThree {
  0% {
    opacity: .4;
  }
  33.333% {
    opacity: .4;
  }
  66.6667% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}


/* .expert-team-arm {
  position: absolute;
  top: 12%;
  left: 32%;
  z-index: 2;
  width: 20%;
}

.expert-hand {
  width: 4.5%;
  position: absolute;
  top: 19.5%;
  left: 50%;
  z-index: 1;
  transition: all .3s ease-in-out;
}

.expert-hand.animated {
  animation-name: handAnimation;
}

.expert-book.animated {
  animation-name: bookAnimation;
}

.expert-hand.animated,
.expert-book.animated {
  animation-duration: 6000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: forwards;
}

.expert-book {
  width: 12%;
  position: absolute;
  top: 13.5%;
  left: 51%;
  z-index: 3;
  transition: all .3s ease-in-out;
  z-index: 3;
} */



/* --------------------------------------------------------------------------
ANTI FRAUD
-----------------------------------------------------------------------------*/
.anti-fraud-hero-wrapper {
  position: relative;
  padding-bottom: 58%;
  height: 0;
  overflow: hidden;
}

.anti-fraud-hero {
  position: absolute;
  top: -18%;
  left: 0;
  width: 118.1%;
}

/* ==============   PROPRIETARY TOOLS  ============== */
.proprietary-tools-wrapper {
  position: relative;
}

.proprietary-tools-icon {
  position: absolute;
  width: 16.2%;
  top: 27.7%;
  left: 51%;
  transform-origin: bottom left;
  transition: all .4s ease-in-out 1s;
}

.proprietary-tools-wrapper .people {
  opacity: 0;
  transition: all .4s ease-in-out 1.4s;
}

.animate.proprietary-tools-wrapper .people {
  opacity: 1;
}

.animate.proprietary-tools-wrapper .proprietary-tools-icon {
  transform: scale(1.9);
}

[class*="proprietary-tools-arrow"] {
  animation-name: floating;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  transform-origin: center;
}

.proprietary-tools-arrow-2 {
  animation-delay: 1s;
}

.proprietary-tools-arrow-3 {
  animation-name: floatingReverse;
  animation-delay: .5s;
}


/* --------------------------------------------------------------------------
MOBILE SOLUTIONS - TEAM
-----------------------------------------------------------------------------*/
.mobile-performance-team {
  position: relative;
  width: 80%;
  max-width: 272px;
  margin: 0 auto;
}

.mobile-performance-team svg {
  position: relative;
  z-index: 5;
}

.circle-dots {
  position: absolute;
  right: 0;
  width: 55%;
  top: 167px;
  transform-origin: center;
  animation-name: rotate;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

[class*="arrow-head"] {
  opacity: 0;
  transition: all .1s ease;
}

.animate[class*="arrow-head"] {
  opacity: 1;
}

/* ==============   WIND LINES  ============== */
.wind-lines path {
  transform-origin: left;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

.wind-lines path:nth-of-type(odd) {
  animation-name: floatHorizontal;
}

.wind-lines path:nth-of-type(even) {
  animation-name: floatHorizontalReverse;
}


/* ==============   REAL TIME - CLOCK and COFFEE  ============== */
.real-time-illo {
  position: relative;
}

.coffee-and-clock {
  z-index: 1;
  position: relative;
}

.real-time-illo   .clock-hand {
  position: absolute;
  width: 1%;
  height: 16.9%;
  top: 16%;
  right: 24.5%;
  transform-origin: bottom center;
  animation-name: rotate;
  animation-duration: 60s;
  animation-timing-function: steps(60);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

/* =======   INVESTMENT PROTECTION  ======= */
.investment-protection-illo {
  position: relative;
}

.investment-protection-illo svg {
  position: relative;
  z-index: 1;
}

.lock-arm {
  z-index: 2;
  position: absolute;
  width: 10%;
  top: 48%;
  right: 31.2%;
}

.animate .lock-arm {
  animation-name: slideDown;
  animation-duration: .4s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 1.6s;
}

.lock-body {
  position: absolute;
  z-index: 2;
  width: 13%;
  top: 59.5%;
  right: 29.8%;
}

.investment-protection-illo .rotating-circles {
  position: absolute;
  width: 44%;
  top: 33%;
  right: auto;
  left: 0;
  animation-duration: 60s;
}

/* --------------------------------------------------------------------------
OUR STORY
-----------------------------------------------------------------------------*/
.our-story-banner {
  overflow: hidden;
}

.our-story-illo-wrapper {
  position: relative;
}

.story-plus,
.story-chat,
.story-phone {
  opacity: 0;
  animation-name: fadeAndScale, floatingReverse;
  animation-duration: 600ms, 3000ms;
  animation-timing-function: ease-in, ease-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
  transform-origin: center;
}

.animate .story-hero-arrow {
  opacity: 1;
  transform: scale(1);
}

.story-hero-arrow {
  opacity: 0;
  transition: all .6s ease-in-out 1s;
}

.story-phone {
  position: absolute;
  top: 38%;
  right: 6.5%;
  width: 5.7%;
  animation-delay: 2.4s, 3s;
  animation-name: fadeAndScale, floating;
}

.story-chat {
  position: absolute;
  top: 32.9%;
  right: 25.6%;
  width: 3.7%;
  animation-delay: 1.8s, 2.4s;
  animation-name: fadeAndScale, floatingReverse;
}

.story-plus {
  position: absolute;
  top: 56%;
  right: 38.6%;
  width: 4.2%;
  animation-delay: 1.2s, 1.8s;
  animation-name: fadeAndScale, floating;
}


.story-our-img {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.story-rotating-circles {
  transform-origin: center;
  animation-name: rotate;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.story-misison-illo-wrapper {
  position: relative;
}

.story-pin-1 {
  position: absolute;
  top: 56%;
  left: 30%;
  width: 9%;
  animation-delay: 1.5s;
}

.story-pin-2 {
  position: absolute;
  top: 29%;
  left: 64%;
  width: 11%;
  animation-delay: 1.8s;
}

.story-bulb,
.story-vision-icon-1,
.story-vision-icon-2,
.story-vision-icon-3 {
  opacity: 0;
  transform-origin: center;

  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.animate .story-bulb,
.animate .story-vision-icon-1,
.animate .story-vision-icon-2,
.animate .story-vision-icon-3 {
  animation-name: fadeAndScale;
}

.story-bulb {
  position: absolute;
  top: 29%;
  left: 42%;
  width: 16%;
  animation-delay: 3.6s;
}

.story-vision-icon-1 {
  position: absolute;
  top: 20%;
  left: 54%;
  width: 13.5%;
  animation-delay: 2.4s;
}

.story-vision-icon-2 {
  position: absolute;
  top: 0%;
  left: 68%;
  width: 13%;
  animation-delay: 2.7s;
}

.story-vision-icon-3 {
  position: absolute;
  top: 25%;
  left: 69%;
  width: 18%;
  animation-delay: 3s;
}

/* --------------------------------------------------------------------------
OUR TEAM
-----------------------------------------------------------------------------*/
.team-hero-wrapper {
  position: relative;
  padding-bottom: 51%;
  height: 0;
  overflow: hidden;
}

.team-banner-illo {
  position: absolute;
  top: -7%;
  left: -5%;
  width: 118%;
  height: 100%;
}

.team-arrow-line {
  position: absolute;
  z-index: 3;
  top: 33%;
  right: 9.5%;
  width: 34.2%;
}

.team-arrow-head {
  position: absolute;
  z-index: 3;
  top: 31.5%;
  right: 8.7%;
  width: 2.7%;
}

.team-circle-dots {
  position: absolute;
  z-index: 1;
  top: 64%;
  right: 31.6%;
  width: 14%;
  transform-origin: center;
  animation-name: rotate;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.team-puzzle-people {
  position: absolute;
  z-index: 2;
  top: 19%;
  right: 3.4%;
  width: 42.2%;
}

[class*="team-puzzle-piece"] {
  transform-origin: center;
  animation-name: floating;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.team-puzzle-piece-3 {
  animation-name: floatingReverse;
  animation-duration: 6s;
}

/* --------------------------------------------------------------------------
CAREERS
-----------------------------------------------------------------------------*/
.careers-banner.container {
  top: -12%;
}

.careers-hero-wrapper {
  position: relative;
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
}

.careers-hero-illo {
  position: absolute;
  top: -7%;
  left: -3%;
  width: 104%;
  height: 100%;
}

.careers-blimp {
  position: absolute;
  z-index: 1;
  top: 22%;
  right: 28.2%;
  width: 5.3%;
  opacity: 0;
  animation-name: subtleFadeAndScale, floating;
  animation-duration: 400ms, 3000ms;
  animation-timing-function: ease-in, ease-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
  transform-origin: center;
  animation-delay: 2s, 2.4s;
}

.careers-circle-dots-1 {
  position: absolute;
  z-index: 1;
  top: 38%;
  right: 6.5%;
  width: 5.7%;
}

.careers-circle-dots-2 {
  position: absolute;
  z-index: 1;
  top: 38%;
  right: 6.5%;
  width: 5.7%;
}

.careers-dog {
  position: absolute;
  width: 5.4%;
  top: 61%;
  left: 63.5%;
  z-index: 4;
}

.dog-paw {
  position: absolute;
  width: 22%;
  right: 13%;
  bottom: 31%;
  animation-name: shake;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

/* ==============   Careers Integrity  ============== */
[class*="careers-up"],
.careers-growth-blimp {
  animation-name: subtleFloating;
  animation-duration: 6s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.careers-up-1 {
  animation-name: floatingReverse;
  animation-delay: -2.5s;
}

.careers-up-2 {
  animation-name: floatingReverse;
  animation-delay: .5s;
}


/* ==============   Continuous Innovation  ============== */
.careers-bulb {
  transform: scale(.9);
  opacity: 0;
  transition: all .5s ease-in-out 1.6s;
  transform-origin: center center;
}

.slide-up .careers-bulb {
  transform: scale(1);
  opacity: 1;
}

/* ==============   Cultivating Community  ============== */
.top-icons,
.left-icons {
  opacity: 0;
  transform: translateX(10px);
  transition: all .7s ease-in-out 2.7s;
}

.slide-up .top-icons,
.slide-up .left-icons {
  opacity: 1;
  transform: translateX(0);
}


[class*="careers-hand"] {
  opacity: 0;
  animation-duration: 500ms, 3000ms;
  animation-timing-function: ease-in, ease-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
  transform-origin: center;
  animation-delay: 2s, 2.4s;
}

.slide-up [class*="careers-hand"] {
  animation-name: fadeInAndUp, floating;
}

.slide-up .careers-hand-2,
.slide-up .careers-hand-4 {
  animation-name: fadeInAndUp, floatingReverse;
}

.careers-hand-1 {
  animation-delay: 1s, 1.5s;
}

.careers-hand-2 {
  animation-delay: 1.2s, 1.7s;
}

.careers-hand-3 {
  animation-delay: 1.4s, 1.9s;
}

.careers-hand-4 {
  animation-delay: 1.6s, 2.1s;
}


/* --------------------------------------------------------------------------
RESPONSIVE STYLES
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {

  /* ==============   RESPONSIVE HELPERS  ============== */
  .gradient-tablet-up {
    display: none;
  }
  .btn-careers-background{
    display: block !important;
    background: linear-gradient(to right, rgb(25, 175, 194) 0%, rgb(25, 193, 185) 100%);
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -7%;
    height: 1px;
    padding-bottom: 200px;
    z-index: 1;
  }

  .hide-mobile {
    opacity: 0;
    height: 0;
    padding-bottom: 0 !important;
    overflow: hidden;
  }

  .careers-hero-wrapper {
    padding-bottom: 5% !important;
  }

  .careers-desc-mobile {
    padding-bottom: 1% !important;
  }

  .responsive-img {
    width: 80%;
    max-width: 80%;
    margin: 10%;
  }

  .no-margin-left-xs {
    margin-left: 0 !important;
  }

  /* ==============   BANNER STYLES  ============== */
  .banner.banner-bg {
    height: auto;
    padding-bottom: 10%;
  }
  .banner-bg .container {
    position: relative;
  }
  .banner-bg.thank-you-bg .container {
    position: absolute;
  }
  .banner-bg .banner-con .banner-con__desc1 {
    /* position: static; */
    z-index: 3;
    position: relative;
    left: 0;
    padding-top: 50px;
    padding-bottom: 70px;
  }
  .banner-bg [class*="btn"] {
    margin-left: auto;
    margin-right: auto;
  }
    .slide-up {
      z-index: 5;
      position: relative;
      margin-bottom: 20px;
      margin-top: 20px;
  }

  /* ==============   GRADIENTS  ============== */
  .home-hero-outer-wrapper,
  .our-story-banner,
  .careers-hero-wrapper {
    background: rgba(0,165,187,1);
    background: -moz-linear-gradient(left, rgba(0,165,187,1) 0%, rgba(0,186,177,1) 100%);
    background: -webkit-linear-gradient(left, rgba(0,165,187,1) 0%, rgba(0,186,177,1) 100%);
    background: -o-linear-gradient(left, rgba(0,165,187,1) 0%, rgba(0,186,177,1) 100%);
    background: -ms-linear-gradient(left, rgba(0,165,187,1) 0%, rgba(0,186,177,1) 100%);
    background: linear-gradient(to right, rgba(0,165,187,1) 0%, rgba(0,186,177,1) 100%);
  }
  .anti-fraud-hero-wrapper,
  .team-hero-wrapper {
    background: rgba(252,154,89,1);
    background: -moz-linear-gradient(left, rgba(252,154,89,1) 0%, rgba(253,102,94,1) 100%);
    background: -webkit-linear-gradient(left, rgba(252,154,89,1) 0%, rgba(253,102,94,1) 100%);
    background: -o-linear-gradient(left, rgba(252,154,89,1) 0%, rgba(253,102,94,1) 100%);
    background: -ms-linear-gradient(left, rgba(252,154,89,1) 0%, rgba(253,102,94,1) 100%);
    background: linear-gradient(to right, rgba(252,154,89,1) 0%, rgba(253,102,94,1) 100%);
  }

  /* ==============   HOME PAGE  ============== */
  .home-hero-illo-wrapper.visible-xs-block {
    position: relative;
    top: 0;
    left: -64%;
    width: 200%;
  }

  .home-solution-title {
    margin: 0 10% 20px;
  }

  .home-hero-outer-wrapper .banner-con__desc {
    margin-top: -12%;
  }

  /* ==============   ANTI-FRAUD  ============== */
  .anti-fraud-hero.visible-xs-block {
    position: relative;
    top: 0;
    left: -64%;
    width: 200%;
  }

  /* ==============   OUR STORY  ============== */
  .our-story-illo-wrapper.visible-xs-block {
    position: relative;
    width: 376%;
    left: -252%;
  }
  .our-story-banner .banner-con__title {
    position: relative;
    z-index: 3;
  }
  .story-section-01 {
    margin-top: -50%;
    background-color: white;
    z-index: 5;
    position: relative;
  }

  .story-hero-container {
    height: auto;
  }

  /* ==============   TEAM  ============== */
  .team-banner-illo-wrapper.visible-xs {
    position: relative;
    width: 220%;
    left: -116%;
  }

  .team-banner-illo-wrapper,
  .team-banner-illo {
    position: relative;
  }

  .team-banner-illo-wrapper {
    width: 200%;
    left: -101%;
  }

  .team-banner-illobanner-illo {
    width: 121%;
  }

  .team-banner-illo #e26dbaff-e778-4bdb-802c-31aa4be21e3d {
    display: none;
  }

  /* ==============   CAREERS  ============== */
  .careers-hero-illo-wrapper.visible-xs-block {
    position: relative;
    width: 431%;
    left: -265%;
  }

  .careers-hero-illo {
    position: static;
    margin-top: -10%;
    margin-bottom: -12%;
  }

  .careers-hero-wrapper .banner-con__title {
    position: relative;
    z-index: 4;
  }
}



/* --------------------------------------------------------------------------
KEYFRAME HELPERS
-----------------------------------------------------------------------------*/
@keyframes bookAnimation {
  0%, 66%, 100% {
    top: 13.5%;
    left: 51%;
    transform: rotate(0);
  }
  33% {
    top: 29.5%;
    left: 49%;
    transform: rotate(38deg);
  }
}
@keyframes handAnimation {
  0%, 66%, 100% {
    top: 19.5%;
    left: 50%;
    transform: rotate(0);
  }
  33% {
    top: 34.5%;
    left: 52%;
    transform: rotate(51deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  50%, 100% {
    transform: rotate(20deg) translate(-27%, 38%);
  }
}

@keyframes dot {
	0%, 100% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0)
	}
	45% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	90% {
		opacity: 1;
		-webkit-transform: scale(0);
		transform: scale(0)
	}
}


@keyframes floatHorizontal {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(7px);
		transform: translateX(7px);
	}
}

@keyframes floatHorizontalReverse {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-7px);
		transform: translateX(-7px);
	}
}

@keyframes subtleFloating {
	from {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	to {
		-webkit-transform: translateY(12px);
		transform: translateY(12px);
	}
}

@keyframes floating {
	from {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	to {
		-webkit-transform: translateY(7px);
		transform: translateY(7px);
	}
}

@keyframes floatingReverse {
	from {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	to {
		-webkit-transform: translateY(-7px);
		transform: translateY(-7px);
	}
}

@keyframes hatch {
	0% {
		transform: rotate(0deg) scaleY(0.6);
    opacity: 1;
	}
	20% {
		transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		transform: rotate(2deg) scaleY(1);
	}
	50% {
		transform: rotate(-2deg);
	}
	65% {
		transform: rotate(1deg);
	}
	80% {
		transform: rotate(-1deg);
	}
	100% {
		transform: rotate(0deg);
    opacity: 1;
	}
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInAndDown {
  0% {
    transform: translateY(-5px);
    opacity:0
  }
  100% {
    transform: translateY(0);
    opacity:1
  }
}

@keyframes fadeInAndUp {
  0% {
    transform: translateY(8px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(0%);
  }
  50%{
    transform: translateY(36%);
  }
  65%{
    transform: translateY(38%);
  }

  100% {
    transform: translateY(36%);
  }
}

@keyframes slideUp {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 14);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  0% {
    transform: matrix(1, 0, 0, 1, 14, 0);
    opacity: 0;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}

@keyframes fadeAndScale {
  0% {
    opacity: 0;
    transform: scale(.7, .7);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes subtleFadeAndScale {
  0% {
    opacity: 0;
    transform: scale(.9, .9);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}