@charaset "utf-8" ;

/*Theme URL: 
Description: 
Author: 
Version: 
Tags: ）
License: 
License URI: 
Theme Name: business_development-eng
Template: ex-factors*/

* {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
    background-color:#fad390;
  }
  
  .container {
    height: 100vh;
    position: relative;
    -ms-scroll-snap-type: y mandatory;
        scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
   
  }
  
  .headline {
    align-items: center;
    background-color: var(--color);
    display: flex;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 700;
    font-size: calc(1rem + 12vmin);
    height: 100vh;
    justify-content: center;
    
    perspective: 1000px;
    scroll-snap-align: start;
    width: 100vw;
  }
  .headline:nth-child(1) {
    --color: #ecd177;
  }
  /*.headline:nth-child(2) {
    --color: #3498db;
  }
  .headline:nth-child(3) {
    --color: #ff7979;
  }
  .headline:nth-child(4) {
    --color: #1abc9c;
  }
  .headline:nth-child(5) {
    --color: #e74c3c;
  }
  .headline:nth-child(6) {
    --color: #d6a578;
  }*/
  
  .word,
  .char {
    -webkit-animation-delay: var(--del);
            animation-delay: var(--del);
    -webkit-animation-direction: var(--dir, normal);
            animation-direction: var(--dir, normal);
    -webkit-animation-duration: var(--dur);
            animation-duration: var(--dur);
    -webkit-animation-iteration-count: var(--it, infinite);
            animation-iteration-count: var(--it, infinite);
    -webkit-animation-name: var(--name);
            animation-name: var(--name);
    -webkit-animation-timing-function: var(--tf);
            animation-timing-function: var(--tf);
    -webkit-animation-fill-mode: var(--fill, forwards);
            animation-fill-mode: var(--fill, forwards);
    display: inline-block;
    position: relative;
    transform-origin: 50% 100%;
    z-index: 1;
  }
  
  .headline--fall .char {
    --name: fall;
    --dur: 600ms;
    --del: calc(var(--char-index) * -0.05s);
    --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
  }
  @-webkit-keyframes fall {
    0% {
      transform: rotateY(-25deg);
    }
    25% {
      transform: translateY(2%) rotateY(25deg);
    }
    50% {
      transform: rotateY(-25deg);
    }
    75% {
      transform: translateY(4%) rotateY(25deg);
    }
    100% {
      transform: rotateY(-25deg);
    }
  }
  @keyframes fall {
    0% {
      transform: rotateY(-25deg);
    }
    25% {
      transform: translateY(2%) rotateY(25deg);
    }
    50% {
      transform: rotateY(-25deg);
    }
    75% {
      transform: translateY(4%) rotateY(25deg);
    }
    100% {
      transform: rotateY(-25deg);
    }
  }
  
  .headline--flip .char {
    --name: flip;
    --dur: 4000ms;
    --del: calc(var(--char-index) * 0.075s);
    --tf: linear;
  }
  @-webkit-keyframes flip {
    5% {
      transform: rotateX(1turn);
    }
    10% {
      transform: rotateX(2turn);
    }
    20% {
      transform: rotateX(3turn);
    }
    40% {
      transform: rotateX(4turn);
    }
    70%, 100% {
      transform: rotateX(5turn);
    }
  }
  @keyframes flip {
    5% {
      transform: rotateX(1turn);
    }
    10% {
      transform: rotateX(2turn);
    }
    20% {
      transform: rotateX(3turn);
    }
    40% {
      transform: rotateX(4turn);
    }
    70%, 100% {
      transform: rotateX(5turn);
    }
  }
  
  .headline--float .char {
    --name: float;
    --dur: 2200ms;
    --del: calc(var(--char-index) * -0.5s);
    --tf: ease-in-out;
    --dir: alternate;
  }
  .headline--float .char:nth-child(2n) {
    --name: float-alt;
  }
  @-webkit-keyframes float {
    from {
      transform: translate(2%, -10%) rotate(-1deg);
    }
    to {
      transform: translate(-2%, 5%) rotate(3deg);
    }
  }
  @keyframes float {
    from {
      transform: translate(2%, -10%) rotate(-1deg);
    }
    to {
      transform: translate(-2%, 5%) rotate(3deg);
    }
  }
  @-webkit-keyframes float-alt {
    from {
      transform: translate(0%, -5%) rotate(-1deg);
    }
    to {
      transform: translate(2%, 10%) rotate(3deg);
    }
  }
  @keyframes float-alt {
    from {
      transform: translate(0%, -5%) rotate(-1deg);
    }
    to {
      transform: translate(2%, 10%) rotate(3deg);
    }
  }
  
  .headline--jog .char {
    --name: jog;
    --dur: 500ms;
    --del: calc(var(--char-index) * -0.025s);
    --tf: linear;
  }
  @-webkit-keyframes jog {
    0% {
      transform: translate(0, 0) rotate(5deg);
    }
    25% {
      transform: translate(5%, -5%) rotate(10deg);
    }
    50% {
      transform: translate(5%, 0) rotate(15deg);
    }
    75% {
      transform: translate(10%, -5%) rotate(10deg);
    }
    100% {
      transform: translate(0, 0) rotate(5deg);
    }
  }
  @keyframes jog {
    0% {
      transform: translate(0, 0) rotate(5deg);
    }
    25% {
      transform: translate(5%, -5%) rotate(10deg);
    }
    50% {
      transform: translate(5%, 0) rotate(15deg);
    }
    75% {
      transform: translate(10%, -5%) rotate(10deg);
    }
    100% {
      transform: translate(0, 0) rotate(5deg);
    }
  }
  
  .headline--jump .char {
    --name: jump;
    --dur: 800ms;
    --del: calc(var(--char-index) * 0.075s);
    --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
  }
  @-webkit-keyframes jump {
    20% {
      transform: translateY(2%) scaleY(0.9);
    }
    40% {
      transform: translateY(-100%) scaleY(1.2);
    }
    50% {
      transform: translateY(10%) scaleY(0.8);
    }
    70% {
      transform: translateY(-5%) scaleY(1);
    }
    80%, 100% {
      transform: translateY(0) scaleY(1);
    }
  }
  @keyframes jump {
    20% {
      transform: translateY(2%) scaleY(0.9);
    }
    40% {
      transform: translateY(-100%) scaleY(1.2);
    }
    50% {
      transform: translateY(10%) scaleY(0.8);
    }
    70% {
      transform: translateY(-5%) scaleY(1);
    }
    80%, 100% {
      transform: translateY(0) scaleY(1);
    }
  }
  
  .headline--twirl .char {
    --name: twirl;
    --dur: 6000ms;
    --del: calc(var(--char-index) * 0.025s);
    --tf: linear;
  }
  @-webkit-keyframes twirl {
    2.5% {
      transform: rotateY(1turn);
    }
    5% {
      transform: rotateY(2turn);
    }
    10% {
      transform: rotateY(3turn);
    }
    20% {
      transform: rotateY(4turn);
    }
    40% {
      transform: rotateY(5turn);
    }
    70%, 100% {
      transform: rotateY(6turn);
    }
  }
  @keyframes twirl {
    2.5% {
      transform: rotateY(1turn);
    }
    5% {
      transform: rotateY(2turn);
    }
    10% {
      transform: rotateY(3turn);
    }
    20% {
      transform: rotateY(4turn);
    }
    40% {
      transform: rotateY(5turn);
    }
    70%, 100% {
      transform: rotateY(6turn);
    }
  }
  
  .headline:nth-child(1) {
    --color: #fad390;
  }
  /*.headline:nth-child(2) {
    --color: #38ada9;
  }
  .headline:nth-child(3) {
    --color: #f7f1e3;
  }
  .headline:nth-child(4) {
    --color: #ff5252;
  }
  .headline:nth-child(5) {
    --color: #d1ccc0;
  }
  .headline:nth-child(6) {
    --color: #34ace0;
  }*/
  
  .headline--blink .char {
    --dur: 0.8s;
    --del: calc(var(--char-index) * 0.0125s);
    --name: blink;
    --tf: steps(1, start);
    opacity: 0;
  }
  @-webkit-keyframes blink {
    50% {
      opacity: 1;
    }
  }
  @keyframes blink {
    50% {
      opacity: 1;
    }
  }
  
  .headline--break .char {
    --dur: 2s;
    --name: break-drop;
    --td: ease;
    color: transparent;
    overflow: visible;
  }
  .headline--break .char:before, .headline--break .char:after {
    color: black;
    visibility: visible;
  }
  .headline--break .char:before {
    -webkit-animation: break-left var(--dur) linear infinite;
            animation: break-left var(--dur) linear infinite;
    -webkit-clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
            clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
    transform-origin: 0 100%;
  }
  .headline--break .char:after {
    -webkit-animation: break-right var(--dur) linear infinite;
            animation: break-right var(--dur) linear infinite;
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
            clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
    transform-origin: 100% 100%;
  }
  @-webkit-keyframes break-drop {
    20% {
      transform: translateY(-100%);
    }
    22% {
      transform: translateY(10%);
    }
    25% {
      transform: translateY(-5%);
    }
    30% {
      transform: translateY(0);
    }
  }
  @keyframes break-drop {
    20% {
      transform: translateY(-100%);
    }
    22% {
      transform: translateY(10%);
    }
    25% {
      transform: translateY(-5%);
    }
    30% {
      transform: translateY(0);
    }
  }
  @-webkit-keyframes break-left {
    22% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(-8deg);
    }
    28% {
      transform: rotate(-10deg);
    }
    30%, 100% {
      transform: rotate(-5deg);
    }
  }
  @keyframes break-left {
    22% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(-8deg);
    }
    28% {
      transform: rotate(-10deg);
    }
    30%, 100% {
      transform: rotate(-5deg);
    }
  }
  @-webkit-keyframes break-right {
    22% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(5deg);
    }
    28% {
      transform: rotate(10deg) translateY(10%);
    }
    30%, 100% {
      transform: rotate(4deg) translateY(5%);
    }
  }
  @keyframes break-right {
    22% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(5deg);
    }
    28% {
      transform: rotate(10deg) translateY(10%);
    }
    30%, 100% {
      transform: rotate(4deg) translateY(5%);
    }
  }
  
  .headline--hide {
    --dur: 4s;
  }
  .headline--hide .word:after {
    -webkit-animation: hide-cover calc(var(--dur) * 2) ease-out infinite;
            animation: hide-cover calc(var(--dur) * 2) ease-out infinite;
    border-top: 1vmin solid black;
    background-color: var(--color);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 2;
  }
  .headline--hide .char {
    --name: hide-jump;
    --del: calc(var(--char-index) * 0.04s);
    --td: cubic-bezier(0.215, 0.61, 0.355, 1);
    --dir: alternate;
    transform-origin: 50% 100%;
  }
  .headline--hide .char[data-char=i]:after {
    --name: hide-peek;
    --dir: alternate;
    -webkit-animation: var(--name) var(--dur) var(--td) infinite var(--dir);
            animation: var(--name) var(--dur) var(--td) infinite var(--dir);
    content: attr(data-char);
    visibility: visible;
  }
  @-webkit-keyframes hide-jump {
    0%, 10% {
      transform: translateY(0);
    }
    15% {
      transform: translateY(-25%);
    }
    20%, 100% {
      transform: translateY(100%);
    }
  }
  @keyframes hide-jump {
    0%, 10% {
      transform: translateY(0);
    }
    15% {
      transform: translateY(-25%);
    }
    20%, 100% {
      transform: translateY(100%);
    }
  }
  @-webkit-keyframes hide-peek {
    0%, 35% {
      transform: translateY(0);
    }
    40%, 60% {
      transform: translateY(-40%);
    }
    70%, 90% {
      transform: translateY(-45%) skewY(10deg);
    }
    95%, 100% {
      transform: translateY(-46%) skewY(-10deg);
    }
  }
  @keyframes hide-peek {
    0%, 35% {
      transform: translateY(0);
    }
    40%, 60% {
      transform: translateY(-40%);
    }
    70%, 90% {
      transform: translateY(-45%) skewY(10deg);
    }
    95%, 100% {
      transform: translateY(-46%) skewY(-10deg);
    }
  }
  @-webkit-keyframes hide-cover {
    0%, 7% {
      transform: scaleX(0);
    }
    8%, 95% {
      transform: scaleX(1);
    }
    98%, 100% {
      transform: scaleX(0);
    }
  }
  @keyframes hide-cover {
    0%, 7% {
      transform: scaleX(0);
    }
    8%, 95% {
      transform: scaleX(1);
    }
    98%, 100% {
      transform: scaleX(0);
    }
  }
  
  .headline--retreat .word {
    -webkit-animation: retreat-shrink 2s cubic-bezier(0.25, 1, 0.35, 1) infinite;
            animation: retreat-shrink 2s cubic-bezier(0.25, 1, 0.35, 1) infinite;
    transform-origin: 50% 100%;
  }
  .headline--retreat .char {
    --name: retreat-stretch;
    --dur: 2s;
    --td: ease-out;
    transform-origin: 50% 100%;
  }
  @-webkit-keyframes retreat-shrink {
    15% {
      transform: scale(1.001);
    }
    30%, 80% {
      transform: scale(0.25);
    }
    100% {
      transform: scale(1.001);
    }
  }
  @keyframes retreat-shrink {
    15% {
      transform: scale(1.001);
    }
    30%, 80% {
      transform: scale(0.25);
    }
    100% {
      transform: scale(1.001);
    }
  }
  @-webkit-keyframes retreat-stretch {
    0%, 10% {
      transform: scaleY(1);
    }
    15% {
      transform: scaleY(0.5);
    }
    25% {
      transform: scaleY(4) rotate(calc(var(--distance-sine) * 65deg));
    }
    35% {
      transform: scaleY(0.8) rotate(calc(var(--distance-sine) * -25deg));
    }
    40% {
      transform: scaleY(1.1) rotate(calc(var(--distance-sine) * 15deg));
    }
    44% {
      transform: scaleY(0.98) rotate(calc(var(--distance-sine) * -10deg));
    }
    48% {
      transform: scaleY(1.01) rotate(calc(var(--distance-sine) * 5deg));
    }
    50% {
      transform: scaleY(1);
    }
  }
  @keyframes retreat-stretch {
    0%, 10% {
      transform: scaleY(1);
    }
    15% {
      transform: scaleY(0.5);
    }
    25% {
      transform: scaleY(4) rotate(calc(var(--distance-sine) * 65deg));
    }
    35% {
      transform: scaleY(0.8) rotate(calc(var(--distance-sine) * -25deg));
    }
    40% {
      transform: scaleY(1.1) rotate(calc(var(--distance-sine) * 15deg));
    }
    44% {
      transform: scaleY(0.98) rotate(calc(var(--distance-sine) * -10deg));
    }
    48% {
      transform: scaleY(1.01) rotate(calc(var(--distance-sine) * 5deg));
    }
    50% {
      transform: scaleY(1);
    }
  }
  
  .headline--sway .char {
    --dur: 1s;
    --del: calc(var(--char-index) * -0.0125s);
    --name: sway;
    --td: linear;
    --dir: alternate;
  }
  @-webkit-keyframes sway {
    from {
      transform: skew(-15deg) rotateX(10deg);
    }
    to {
      transform: skew(15deg) rotateX(-10deg);
    }
  }
  @keyframes sway {
    from {
      transform: skew(-15deg) rotateX(10deg);
    }
    to {
      transform: skew(15deg) rotateX(-10deg);
    }
  }
  
  .headline--tumble .char {
    --dur: 0.8s;
    --name: bounce;
    --del: calc(var(--char-index) * -0.125s);
    --td: ease;
    color: transparent;
    overflow: visible;
  }
  .headline--tumble .char:after {
    -webkit-animation: tumble var(--dur) linear infinite;
            animation: tumble var(--dur) linear infinite;
    color: black;
    visibility: visible;
    z-index: 2;
  }
  @-webkit-keyframes bounce {
    25% {
      transform: translateY(-25%);
    }
    50% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(-35%);
    }
  }
  @keyframes bounce {
    25% {
      transform: translateY(-25%);
    }
    50% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(-35%);
    }
  }
  @-webkit-keyframes tumble {
    60% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes tumble {
    60% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
  display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
  position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  user-select: none;
}

/* Expanded CSS Variables */

.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);

  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);

  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));

  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));

  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));

  /* Absolute distance from center, only positive */
  --distance: calc(
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );

  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));

  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center)));
}

#Business-Development-text {
  font-size: 1.5em;
  padding-left: 2%;
  padding-top: 10%;
}