@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");

a {
  color: inherit;
}

.intro {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  max-width: 30em;
  text-align: center;
  margin: 2rem;
}

/* ---------------------------------- */
/* Basic stylistic choices */
body {
  
}

h1 {
     color: #262626;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  line-height: 1;
  font-size: 6vw;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0.9em auto;
}
 
.splitting {
  cursor: pointer;
}

/* ---------------------------------- */
.blur-it .char {
  color: white;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.blur-it .char:before, .blur-it .char:after {
  visibility: visible;
  opacity: 0;
}
.blur-it:hover .char {
  color: rgba(255, 255, 255, 0.5);
}
.blur-it:hover .char:before, .blur-it:hover .char:after {
  opacity: 0.8;
  -webkit-animation: blur 0.6s linear infinite alternate;
          animation: blur 0.6s linear infinite alternate;
  -webkit-animation-delay: calc( -0.2s * var(--distance-percent) );
          animation-delay: calc( -0.2s * var(--distance-percent) );
}
.blur-it:hover .char:after {
  -webkit-animation-delay: calc( 0.3s + (-0.2s * var(--distance-percent)) );
          animation-delay: calc( 0.3s + (-0.2s * var(--distance-percent)) );
}

@-webkit-keyframes blur {
  0% {
    -webkit-transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg);
            transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg);
  }
  50% {
    -webkit-transform: translate(0, 0) scale(1.1) rotate(0deg);
            transform: translate(0, 0) scale(1.1) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0.1em, 0) scale(0.9) rotate(2deg);
            transform: translate(0.1em, 0) scale(0.9) rotate(2deg);
  }
}

@keyframes blur {
  0% {
    -webkit-transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg);
            transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg);
  }
  50% {
    -webkit-transform: translate(0, 0) scale(1.1) rotate(0deg);
            transform: translate(0, 0) scale(1.1) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0.1em, 0) scale(0.9) rotate(2deg);
            transform: translate(0.1em, 0) scale(0.9) rotate(2deg);
  }
}
.plop-it {
  -webkit-perspective: 500px;
          perspective: 500px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.plop-it:hover .char {
  -webkit-animation: plop 2s ease-out infinite both;
          animation: plop 2s ease-out infinite both;
  -webkit-animation-delay: calc( 0.05s * var(--char-index) );
          animation-delay: calc( 0.05s * var(--char-index) );
}
@-webkit-keyframes plop {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0px, 10px, 400px) rotate(180deg);
            transform: translate3d(0px, 10px, 400px) rotate(180deg);
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
            animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
  }
  20% {
    -webkit-transform: translate3d(0px, -20px, 200px) rotate(90deg);
            transform: translate3d(0px, -20px, 200px) rotate(90deg);
    -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1);
            animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1);
  }
  40%, 70% {
    opacity: 1;
    -webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg);
            transform: translate3d(0px, 0px, 0px) rotate(0deg);
  }
  90%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(0px, 10px, -200px) rotate(-90deg);
            transform: translate3d(0px, 10px, -200px) rotate(-90deg);
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
            animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
  }
}
@keyframes plop {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0px, 10px, 400px) rotate(180deg);
            transform: translate3d(0px, 10px, 400px) rotate(180deg);
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
            animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
  }
  20% {
    -webkit-transform: translate3d(0px, -20px, 200px) rotate(90deg);
            transform: translate3d(0px, -20px, 200px) rotate(90deg);
    -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1);
            animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1);
  }
  40%, 70% {
    opacity: 1;
    -webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg);
            transform: translate3d(0px, 0px, 0px) rotate(0deg);
  }
  90%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(0px, 10px, -200px) rotate(-90deg);
            transform: translate3d(0px, 10px, -200px) rotate(-90deg);
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
            animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
  }
}
/* ---------------------------------- */
.plump-it,
.pinch-it {
  -webkit-perspective: 300px;
          perspective: 300px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.plump-it .char,
.pinch-it .char {
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.8, 0, 0, 0.8);
  transition: -webkit-transform 0.4s cubic-bezier(0.8, 0, 0, 0.8);
  transition: transform 0.4s cubic-bezier(0.8, 0, 0, 0.8);
  transition: transform 0.4s cubic-bezier(0.8, 0, 0, 0.8), -webkit-transform 0.4s cubic-bezier(0.8, 0, 0, 0.8);
  -webkit-transition-delay: calc(0.06s * var(--distance-percent));
          transition-delay: calc(0.06s * var(--distance-percent));
}

.plump-it:hover .char {
  -webkit-transform: translateX(calc( -0.5em * var(--distance-sine) )) translateZ(calc( 100px * (1 - var(--distance-percent) ) )) rotateY(calc( 40deg * var(--distance-sine) ));
          transform: translateX(calc( -0.5em * var(--distance-sine) )) translateZ(calc( 100px * (1 - var(--distance-percent) ) )) rotateY(calc( 40deg * var(--distance-sine) ));
}

.pinch-it:hover .char {
  -webkit-transform: translateX(calc( -1em * var(--distance-sine) )) translateZ(calc( -150px * (1 - var(--distance-percent) ) )) rotateY(calc( -60deg * var(--distance-sine) ));
          transform: translateX(calc( -1em * var(--distance-sine) )) translateZ(calc( -150px * (1 - var(--distance-percent) ) )) rotateY(calc( -60deg * var(--distance-sine) ));
}

/* ---------------------------------- */
.stagger-it .char {
  -webkit-transition: color 0.5s linear;
  transition: color 0.5s linear;
  -webkit-transition-delay: calc( 0.04s * var(--char-index) );
          transition-delay: calc( 0.04s * var(--char-index) );
}
.stagger-it:hover {
  color: #00C9B1;
}

.stretch-it .char {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.8, 0, 0, 0.9);
  transition: -webkit-transform 0.5s cubic-bezier(0.8, 0, 0, 0.9);
  transition: transform 0.5s cubic-bezier(0.8, 0, 0, 0.9);
  transition: transform 0.5s cubic-bezier(0.8, 0, 0, 0.9), -webkit-transform 0.5s cubic-bezier(0.8, 0, 0, 0.9);
}
.stretch-it:hover .char {
  -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
}
.stretch-it .char:hover {
  -webkit-transform: scale(0.9, 1.5);
          transform: scale(0.9, 1.5);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

/* ---------------------------------- */
.slide-vertical .char,
.slide-horizontal .char {
  overflow: hidden;
  color: transparent;
}
.slide-vertical .char:before, .slide-vertical .char:after,
.slide-horizontal .char:before,
.slide-horizontal .char:after {
  visibility: visible;
  color: #262626;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.9, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
  -webkit-transition-delay: calc( 0.2s + ( 0.02s * ( var(--char-index)) ) );
          transition-delay: calc( 0.2s + ( 0.02s * ( var(--char-index)) ) );
}
.slide-vertical .char:before,
.slide-horizontal .char:before {
  color: #00C9B1;
  -webkit-transition-delay: calc( 0.02s * ( var(--char-index)) );
          transition-delay: calc( 0.02s * ( var(--char-index)) );
}
.slide-vertical:hover .char:before,
.slide-horizontal:hover .char:before {
  -webkit-transition-delay: calc( 0.2s + ( 0.02s * ( var(--char-index)) ) );
          transition-delay: calc( 0.2s + ( 0.02s * ( var(--char-index)) ) );
}
.slide-vertical:hover .char:after,
.slide-horizontal:hover .char:after {
  -webkit-transition-delay: calc( 0.02s * ( var(--char-index)) );
          transition-delay: calc( 0.02s * ( var(--char-index)) );
}

.slide-vertical .char:before {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.slide-vertical:hover .char:before {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.slide-vertical:hover .char:after {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.slide-horizontal .char:before {
  -webkit-transform: translateX(110%);
          transform: translateX(110%);
}
.slide-horizontal:hover .char:before {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.slide-horizontal:hover .char:after {
  -webkit-transform: translateX(-110%);
          transform: translateX(-110%);
}

/* ---------------------------------- */
.fall-out .char {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.86, 0.01, 0.14, 0.98);
  transition: -webkit-transform 0.5s cubic-bezier(0.86, 0.01, 0.14, 0.98);
  transition: transform 0.5s cubic-bezier(0.86, 0.01, 0.14, 0.98);
  transition: transform 0.5s cubic-bezier(0.86, 0.01, 0.14, 0.98), -webkit-transform 0.5s cubic-bezier(0.86, 0.01, 0.14, 0.98);
  color: transparent;
}
.fall-out .char:before, .fall-out .char:after {
  visibility: visible;
  color: #262626;
  -webkit-animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
          animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: calc(0.75s + (0.05s * var(--char-index)) );
          animation-delay: calc(0.75s + (0.05s * var(--char-index)) );
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.fall-out .char:after {
  -webkit-animation-delay: calc(0.05s * var(--char-index) );
          animation-delay: calc(0.05s * var(--char-index) );
}
.fall-out:hover .char:before {
  -webkit-animation-name: fall-in;
          animation-name: fall-in;
}
.fall-out:hover .char:after {
  -webkit-animation-name: fall-out;
          animation-name: fall-out;
}

@-webkit-keyframes fall-in {
  0% {
    -webkit-transform: translateY(-150%) rotate(-120deg);
            transform: translateY(-150%) rotate(-120deg);
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
    opacity: 1;
  }
}

@keyframes fall-in {
  0% {
    -webkit-transform: translateY(-150%) rotate(-120deg);
            transform: translateY(-150%) rotate(-120deg);
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
    opacity: 1;
  }
}
@-webkit-keyframes fall-out {
  50% {
    -webkit-transform: translateY(10%) rotate(15deg);
            transform: translateY(10%) rotate(15deg);
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(250%) rotate(120deg);
            transform: translateY(250%) rotate(120deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    opacity: 0;
  }
}
@keyframes fall-out {
  50% {
    -webkit-transform: translateY(10%) rotate(15deg);
            transform: translateY(10%) rotate(15deg);
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(250%) rotate(120deg);
            transform: translateY(250%) rotate(120deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    opacity: 0;
  }
}
/* ---------------------------------- */
.run-out {
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.run-out .word {
  pointer-events: auto;
}
.run-out .char {
  color: transparent;
}
.run-out .char:before, .run-out .char:after {
  visibility: visible;
  color: #262626;
  -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97);
  transition: -webkit-transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97);
  transition: transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97);
  transition: transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97), -webkit-transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * var(--char-index)) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * var(--char-index)) );
}
.run-out .char:before {
  -webkit-transform: translateX(-100vw) rotate(-35deg);
          transform: translateX(-100vw) rotate(-35deg);
  -webkit-transition-delay: calc(0.04s * var(--char-index) );
          transition-delay: calc(0.04s * var(--char-index) );
}


.swslidi1:hover .char:before {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
}
.swslidi1:hover .char:after {
  -webkit-transform: translateX(100vw) rotate(35deg);
          transform: translateX(100vw) rotate(35deg);
  -webkit-transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
}

.swslidi2:hover .char:before {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
}
.swslidi2:hover .char:after {
  -webkit-transform: translateX(100vw) rotate(35deg);
          transform: translateX(100vw) rotate(35deg);
  -webkit-transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
}

.swslidi3:hover .char:before {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
}
.swslidi3:hover .char:after {
  -webkit-transform: translateX(100vw) rotate(35deg);
          transform: translateX(100vw) rotate(35deg);
  -webkit-transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
}



#About:hover .char:before {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
}
#About:hover .char:after {
  -webkit-transform: translateX(100vw) rotate(35deg);
          transform: translateX(100vw) rotate(35deg);
  -webkit-transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
}
#Services:hover .char:before {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
}
#Services:hover .char:after {
  -webkit-transform: translateX(100vw) rotate(35deg);
          transform: translateX(100vw) rotate(35deg);
  -webkit-transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
}
#Features:hover .char:before {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
}
#Features:hover .char:after {
  -webkit-transform: translateX(100vw) rotate(35deg);
          transform: translateX(100vw) rotate(35deg);
  -webkit-transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
}  
#Portfolio:hover .char:before {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
}
#Portfolio:hover .char:after {
  -webkit-transform: translateX(100vw) rotate(35deg);
          transform: translateX(100vw) rotate(35deg);
  -webkit-transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
} 
 #CLIENTSed:hover .char:before {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
}
#CLIENTSed:hover .char:after {
  -webkit-transform: translateX(100vw) rotate(35deg);
          transform: translateX(100vw) rotate(35deg);
  -webkit-transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
          transition-delay: calc( (0.04s * (var(--char-total) - var(--char-index))) );
} 
 
 

/* ---------------------------------- */
.shift-right:before {
  content: '>';
  font: inherit;
  vertical-align: 0.1em;
  display: inline-block;
  -webkit-transform: scaleY(0) translateX(-1em);
          transform: scaleY(0) translateX(-1em);
  margin-right: -0.25em;
}
.shift-right:before,
.shift-right .char {
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
  transition: -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98), -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
  -webkit-transition-delay: calc( 0.015s * var(--char-index) );
          transition-delay: calc( 0.015s * var(--char-index) );
}
.shift-right .char {
  -webkit-transform: translateX(-0.15em);
          transform: translateX(-0.15em);
}
.shift-right:hover:before {
  -webkit-transform: scaleY(1) translateX(0em);
          transform: scaleY(1) translateX(0em);
}
.shift-right:hover .char {
  -webkit-transform: translateX(1em);
          transform: translateX(1em);
  -webkit-transform: translateX(0.5em) translateX(calc(0.1em * var(--char-index)));
          transform: translateX(0.5em) translateX(calc(0.1em * var(--char-index)));
}

/* ---------------------------------- */
.spread-out .char {
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.8, 0, 0.2, 1);
  transition: -webkit-transform 1s cubic-bezier(0.8, 0, 0.2, 1);
  transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1);
  transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0.8, 0, 0.2, 1);
  -webkit-transition-delay: calc( 0.2s * var(--distance-percent) );
          transition-delay: calc( 0.2s * var(--distance-percent) );
}

.spread-out:hover .char {
  -webkit-transition-delay: calc( 0.2s * ( 1 - var(--distance-percent) ) );
          transition-delay: calc( 0.2s * ( 1 - var(--distance-percent) ) );
  -webkit-transform: scale(0.6) translateX(calc(1.25em * var(--distance-sine)));
          transform: scale(0.6) translateX(calc(1.25em * var(--distance-sine)));
}

.pull-in .char {
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.8, 0, 0.2, 1);
  transition: -webkit-transform 1s cubic-bezier(0.8, 0, 0.2, 1);
  transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1);
  transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0.8, 0, 0.2, 1);
  -webkit-transition-delay: calc( 0.2s * ( 1 - var(--distance-percent) ) );
          transition-delay: calc( 0.2s * ( 1 - var(--distance-percent) ) );
}

.pull-in:hover .char {
  -webkit-transition-delay: calc( 0.2s * var(--distance-percent) );
          transition-delay: calc( 0.2s * var(--distance-percent) );
  -webkit-transform: scale(0.5) translateX(calc(-1.5em * var(--distance-sine)));
          transform: scale(0.5) translateX(calc(-1.5em * var(--distance-sine)));
}

/* ---------------------------------- */
.inflate-it .char {
  -webkit-transform: scale(1) translateX(0em);
          transform: scale(1) translateX(0em);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0);
  -webkit-transition: text-shadow 0.8s linear, -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
  transition: text-shadow 0.8s linear, -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98), text-shadow 0.8s linear;
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98), text-shadow 0.8s linear, -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
  -webkit-transition-delay: calc( 0.18s * var(--distance-percent) );
          transition-delay: calc( 0.18s * var(--distance-percent) );
}
.inflate-it:hover .char {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: scale(calc( 1 + ( 0.7 * ( 1 - var(--distance-percent) ) ) )) translateX(calc(-0.12em * var(--distance-sine)));
          transform: scale(calc( 1 + ( 0.7 * ( 1 - var(--distance-percent) ) ) )) translateX(calc(-0.12em * var(--distance-sine)));
  -webkit-transition-delay: calc( 0.08s * var(--distance-percent) );
          transition-delay: calc( 0.08s * var(--distance-percent) );
}

/* ---------------------------------- */
.bounce-it .char {
  line-height: 1;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
          animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: calc(0.05s * var(--char-index) );
          animation-delay: calc(0.05s * var(--char-index) );
  -webkit-animation-duration: calc( 0.2s + ( 0.03s * var(--char-total)) );
          animation-duration: calc( 0.2s + ( 0.03s * var(--char-total)) );
}
.bounce-it:hover .char {
  -webkit-animation-name: bounce-char;
          animation-name: bounce-char;
}

@-webkit-keyframes bounce-end {
  to {
    -webkit-transform: translateY(0%) scale(1);
            transform: translateY(0%) scale(1);
  }
}

@keyframes bounce-end {
  to {
    -webkit-transform: translateY(0%) scale(1);
            transform: translateY(0%) scale(1);
  }
}
@-webkit-keyframes bounce-char {
  20% {
    -webkit-transform: translateY(0%) scale(1.3, 0.8);
            transform: translateY(0%) scale(1.3, 0.8);
  }
  70% {
    -webkit-transform: translateY(-40%) scale(0.8, 1.2);
            transform: translateY(-40%) scale(0.8, 1.2);
  }
}
@keyframes bounce-char {
  20% {
    -webkit-transform: translateY(0%) scale(1.3, 0.8);
            transform: translateY(0%) scale(1.3, 0.8);
  }
  70% {
    -webkit-transform: translateY(-40%) scale(0.8, 1.2);
            transform: translateY(-40%) scale(0.8, 1.2);
  }
}
/* ---------------------------------- */
.wiggle-it:hover .char {
  -webkit-transform-origin: center 50%;
          transform-origin: center 50%;
  -webkit-animation: wiggle-char 0.25s linear infinite both;
          animation: wiggle-char 0.25s linear infinite both;
  -webkit-animation-delay: calc(-0.02s * var(--char-index) );
          animation-delay: calc(-0.02s * var(--char-index) );
}

@-webkit-keyframes wiggle-char {
  0%, 50%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
  }
  75% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
}

@keyframes wiggle-char {
  0%, 50%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
  }
  75% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
}
/* ---------------------------------- */
.zip-it .char,
.split-it .char {
  color: #00C9B1;
}
.zip-it .char,
.zip-it .char:before,
.zip-it .char:after,
.split-it .char,
.split-it .char:before,
.split-it .char:after {
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.25, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.25, 1);
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.25, 1);
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.25, 1), -webkit-transform 0.8s cubic-bezier(0.75, 0, 0.25, 1);
  -webkit-transition-delay: calc( 0.2s * var(--distance-percent) );
          transition-delay: calc( 0.2s * var(--distance-percent) );
}
.zip-it .char:before,
.zip-it .char:after,
.split-it .char:before,
.split-it .char:after {
  visibility: visible;
  color: #262626;
}
.zip-it .char:before,
.split-it .char:before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%);
          clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%);
}
.zip-it .char:after,
.split-it .char:after {
  -webkit-clip-path: polygon(0 46%, 100% 46%, 100% 100%, 0 100%);
          clip-path: polygon(0 46%, 100% 46%, 100% 100%, 0 100%);
}
.zip-it:hover .char:before,
.split-it:hover .char:before {
  -webkit-transform: translateY(-45%) scaleY(0);
          transform: translateY(-45%) scaleY(0);
}
.zip-it:hover .char:after,
.split-it:hover .char:after {
  -webkit-transform: translateY(45%) scaleY(0);
          transform: translateY(45%) scaleY(0);
}

.zip-it .char,
.zip-it .char:before,
.zip-it .char:after {
  -webkit-transition-delay: calc( 0.5s * ( 1 - var(--char-percent) ) );
          transition-delay: calc( 0.5s * ( 1 - var(--char-percent) ) );
}
.zip-it:hover .char,
.zip-it:hover .char:before,
.zip-it:hover .char:after {
  -webkit-transition-delay: calc( 0.5s * var(--char-percent) );
          transition-delay: calc( 0.5s * var(--char-percent) );
}

/* ---------------------------------- */
.glitch-it .char,
.glitch-it .char:before,
.glitch-it .char:after {
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
  -webkit-animation-duration: 0.6s, 0.4s;
          animation-duration: 0.6s, 0.4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps(1);
          animation-timing-function: steps(1);
  -webkit-animation-delay: calc( -0.1s * var(--char-index) );
          animation-delay: calc( -0.1s * var(--char-index) );
}
.glitch-it .char:before,
.glitch-it .char:after {
  visibility: visible;
  opacity: 0;
  mix-blend-mode: overlay;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-animation-name: glitch-anim, glitch-bounce;
          animation-name: glitch-anim, glitch-bounce;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.glitch-it .char:before {
  color: #F85959;
  -webkit-animation-delay: calc( -0.02s * var(--char-index) );
          animation-delay: calc( -0.02s * var(--char-index) );
}
.glitch-it .char:after {
  color: #B7F5DE;
  -webkit-animation-delay: calc( -.5s * var(--char-index) );
          animation-delay: calc( -.5s * var(--char-index) );
}
.glitch-it:hover .char {
  color: rgba(255, 255, 255, 0.3);
  -webkit-animation-name: glitch-bounce;
          animation-name: glitch-bounce;
}
.glitch-it:hover .char:before, .glitch-it:hover .char:after {
  opacity: 1;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes glitch-bounce {
  20% {
    -webkit-transform: translate(-1%, 0%);
            transform: translate(-1%, 0%);
  }
  40% {
    -webkit-transform: translate(14%, -2%);
            transform: translate(14%, -2%);
  }
  50% {
    -webkit-transform: translate(-5%, 5%);
            transform: translate(-5%, 5%);
  }
  65% {
    -webkit-transform: translate(1%, -2%);
            transform: translate(1%, -2%);
  }
  80% {
    -webkit-transform: translate(-3%, 2%);
            transform: translate(-3%, 2%);
  }
}

@keyframes glitch-bounce {
  20% {
    -webkit-transform: translate(-1%, 0%);
            transform: translate(-1%, 0%);
  }
  40% {
    -webkit-transform: translate(14%, -2%);
            transform: translate(14%, -2%);
  }
  50% {
    -webkit-transform: translate(-5%, 5%);
            transform: translate(-5%, 5%);
  }
  65% {
    -webkit-transform: translate(1%, -2%);
            transform: translate(1%, -2%);
  }
  80% {
    -webkit-transform: translate(-3%, 2%);
            transform: translate(-3%, 2%);
  }
}
@-webkit-keyframes glitch-anim {
  0% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
            clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
  }
  20% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
            clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  40% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
            clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  60% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
            clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  80% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
            clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  100% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
            clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
}
@keyframes glitch-anim {
  0% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
            clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
  }
  20% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
            clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  40% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
            clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  60% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
            clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  80% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
            clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  100% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
            clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
}
/* ---------------------------------- */
.frown-it .char,
.smile-it .char {
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.75, 0, 0.25, 1);
  transition: -webkit-transform 1s cubic-bezier(0.75, 0, 0.25, 1);
  transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1);
  transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1), -webkit-transform 1s cubic-bezier(0.75, 0, 0.25, 1);
  -webkit-transition-duration: calc( 0.3s + ( 0.03s * var(--distance-percent)) );
          transition-duration: calc( 0.3s + ( 0.03s * var(--distance-percent)) );
}

.frown-it:hover .char {
  -webkit-transform: translateY(calc( 1.2em * var(--distance-percent) )) rotate(calc( 30deg * var(--distance-sine) ));
          transform: translateY(calc( 1.2em * var(--distance-percent) )) rotate(calc( 30deg * var(--distance-sine) ));
}

.smile-it:hover .char {
  -webkit-transform: translateY(calc( -1em * var(--distance-percent) )) rotate(calc( -35deg * var(--distance-sine) ));
          transform: translateY(calc( -1em * var(--distance-percent) )) rotate(calc( -35deg * var(--distance-sine) ));
}

/* ---------------------------------- */
.flip-it .char,
.flip-3d .char {
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.6, 0, 0, 0.6);
  transition: -webkit-transform 0.6s cubic-bezier(0.6, 0, 0, 0.6);
  transition: transform 0.6s cubic-bezier(0.6, 0, 0, 0.6);
  transition: transform 0.6s cubic-bezier(0.6, 0, 0, 0.6), -webkit-transform 0.6s cubic-bezier(0.6, 0, 0, 0.6);
  -webkit-transition-delay: calc( 0.3s * ( 1 - var(--distance-percent)) );
          transition-delay: calc( 0.3s * ( 1 - var(--distance-percent)) );
  -webkit-transition-delay: calc( 0.3s * var(--distance-percent) );
          transition-delay: calc( 0.3s * var(--distance-percent) );
}
.flip-it:hover .char,
.flip-3d:hover .char {
  -webkit-transform: rotateX(-1turn);
          transform: rotateX(-1turn);
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-delay: calc( 0.3s * var(--distance-percent) );
          transition-delay: calc( 0.3s * var(--distance-percent) );
  -webkit-transition-delay: calc( 0.3s * ( 1 - var(--distance-percent)) );
          transition-delay: calc( 0.3s * ( 1 - var(--distance-percent)) );
}

.flip-3d {
  -webkit-perspective: 200px;
          perspective: 200px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

/* ---------------------------------- */
.elevate-it {
  -webkit-perspective: 400px;
          perspective: 400px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.elevate-it .char {
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.5, 0, 0, 0.9);
  transition: -webkit-transform 0.8s cubic-bezier(0.5, 0, 0, 0.9);
  transition: transform 0.8s cubic-bezier(0.5, 0, 0, 0.9);
  transition: transform 0.8s cubic-bezier(0.5, 0, 0, 0.9), -webkit-transform 0.8s cubic-bezier(0.5, 0, 0, 0.9);
  -webkit-transition-delay: calc( 0.1s * (1 - var(--distance-percent)) );
          transition-delay: calc( 0.1s * (1 - var(--distance-percent)) );
  color: transparent;
}
.elevate-it .char:before, .elevate-it .char:after {
  visibility: visible;
}
.elevate-it .char:before {
  color: #262626;
  opacity: 0.85;
  -webkit-transform: translateY(0%) rotateX(45deg) scale(1, 0);
          transform: translateY(0%) rotateX(45deg) scale(1, 0);
  -webkit-transform-origin: center 80%;
          transform-origin: center 80%;
}
.elevate-it .char:after {
  color: #262626;
}
.elevate-it:hover .char:before {
  -webkit-transform: translateY(0%) rotateX(55deg) scale(0.8);
          transform: translateY(0%) rotateX(55deg) scale(0.8);
  -webkit-transform: translateY(0%) rotateX(55deg) scale(0.8, calc( 0.4 + (0.4 * ( 1 - var(--distance-percent))) ));
          transform: translateY(0%) rotateX(55deg) scale(0.8, calc( 0.4 + (0.4 * ( 1 - var(--distance-percent))) ));
}
.elevate-it:hover .char:after {
  -webkit-transform: translateY(-20%) rotateX(55deg);
          transform: translateY(-20%) rotateX(55deg);
  -webkit-transform: translateY(-50%) translateY(calc(30% * var(--distance-percent) )) rotateX(55deg);
          transform: translateY(-50%) translateY(calc(30% * var(--distance-percent) )) rotateX(55deg);
}

/* ---------------------------------- */
.color-cycle:hover .char {
  -webkit-animation: color-cycle 1s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
          animation: color-cycle 1s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
  -webkit-animation-delay: calc( 0.03s * var(--char-index) );
          animation-delay: calc( 0.03s * var(--char-index) );
  -webkit-animation-duration: calc( 0.04s * calc( var(--char-total) ) );
          animation-duration: calc( 0.04s * calc( var(--char-total) ) );
}

@-webkit-keyframes color-cycle {
  25% {
    color: #FEFF89;
  }
  50% {
    color: #FF9F68;
  }
  75% {
    color: #F85959;
  }
  100% {
    color: #AC005D;
  }
}

@keyframes color-cycle {
  25% {
    color: #FEFF89;
  }
  50% {
    color: #FF9F68;
  }
  75% {
    color: #F85959;
  }
  100% {
    color: #AC005D;
  }
}
/* ---------------------------------- */
.rainbow-it .char {
  -webkit-transition: color 0.6s linear;
  transition: color 0.6s linear;
  -webkit-transition-delay: calc( 0.2s * (1 - var(--distance-percent)) );
          transition-delay: calc( 0.2s * (1 - var(--distance-percent)) );
}
.rainbow-it:hover .char {
  color: hsl(calc(260 * ( var(--char-index) / var(--char-total) ) ), 90%, 70%);
}

/* ---------------------------------- */
.pop-out .char {
  color: #00C9B1;
}
.pop-out .char:after {
  visibility: visible;
  color: #262626;
  z-index: 2;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 1), linear;
          animation-timing-function: cubic-bezier(0.5, 0.5, 1), linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: calc( 0.08s * calc( var(--char-total) ) );
          animation-duration: calc( 0.08s * calc( var(--char-total) ) );
  -webkit-animation-delay: calc( 0.08s * var(--char-index) );
          animation-delay: calc( 0.08s * var(--char-index) );
}
.pop-out:hover .char:after {
  -webkit-animation-name: pop-char-out;
          animation-name: pop-char-out;
}

@-webkit-keyframes pop-char-out {
  0%, 70%, 100% {
    -webkit-transform: translate(0em, 0em);
            transform: translate(0em, 0em);
  }
  35% {
    -webkit-transform: translate(0.05em, -0.1em);
            transform: translate(0.05em, -0.1em);
  }
}

@keyframes pop-char-out {
  0%, 70%, 100% {
    -webkit-transform: translate(0em, 0em);
            transform: translate(0em, 0em);
  }
  35% {
    -webkit-transform: translate(0.05em, -0.1em);
            transform: translate(0.05em, -0.1em);
  }
}
/* ---------------------------------- */
.pop-out-color .char {
  color: #262626;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1), linear;
          animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1), linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: calc( 0.08s * calc( var(--char-total) ) );
          animation-duration: calc( 0.08s * calc( var(--char-total) ) );
  -webkit-animation-delay: calc( 0.08s * var(--char-index) );
          animation-delay: calc( 0.08s * var(--char-index) );
}
.pop-out-color .char:before, .pop-out-color .char:after {
  visibility: visible;
  color: #262626;
  z-index: 1;
  -webkit-animation: inherit;
          animation: inherit;
}
.pop-out-color .char:after {
  color: #262626;
  z-index: 2;
}
.pop-out-color:hover .char {
  -webkit-animation-name: color-cycle;
          animation-name: color-cycle;
}
.pop-out-color:hover .char:after {
  -webkit-animation-name: pop-char-out;
          animation-name: pop-char-out;
}
.pop-out-color:hover .char:before {
  -webkit-animation-name: pop-char-out2, color-cycle;
          animation-name: pop-char-out2, color-cycle;
}

@-webkit-keyframes pop-char-out2 {
  0%, 70%, 100% {
    -webkit-transform: translate(0em, 0em);
            transform: translate(0em, 0em);
  }
  35% {
    -webkit-transform: translate(0.025em, -0.05em);
            transform: translate(0.025em, -0.05em);
  }
}

@keyframes pop-char-out2 {
  0%, 70%, 100% {
    -webkit-transform: translate(0em, 0em);
            transform: translate(0em, 0em);
  }
  35% {
    -webkit-transform: translate(0.025em, -0.05em);
            transform: translate(0.025em, -0.05em);
  }
}