/* https://codepen.io/shshaw/pen/XVjKrG */


.splitting {
    cursor: pointer;
}

/* ---------------------------------- */
.blur-it .char {
    color: white;
    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% {
        transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg);
    }

    50% {
        transform: translate(0, 0) scale(1.1) rotate(0deg);
    }

    100% {
        transform: translate(0.1em, 0) scale(0.9) rotate(2deg);
    }
}

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

    50% {
        transform: translate(0, 0) scale(1.1) rotate(0deg);
    }

    100% {
        transform: translate(0.1em, 0) scale(0.9) rotate(2deg);
    }
}
/********* EN USO *****************/
.plop-it {
    perspective: 500px;
    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));
    }

    .plop-it.ON .char {
        -webkit-animation: plop 2s ease-out 1 both;
        animation: plop 2s ease-out 1 both;
        -webkit-animation-delay: calc(0.05s * var(--char-index));
        animation-delay: calc(0.05s * var(--char-index));
    }
  

@-webkit-keyframes plop {
    0% {
        opacity: 0;
        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% {
        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;
        transform: translate3d(0px, 0px, 0px) rotate(0deg);
    }

    90%, 100% {
        opacity: 0;
        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;
        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% {
        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;
        transform: translate3d(0px, 0px, 0px) rotate(0deg);
    }

    90%, 100% {
        opacity: 0;
        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 {
    perspective: 300px;
    transform-style: preserve-3d;
}

    .plump-it .char,
    .pinch-it .char {
        transition: transform 0.4s cubic-bezier(0.8, 0, 0, 0.8);
        transition-delay: calc(0.06s * var(--distance-percent));
    }

    .plump-it:hover .char {
        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 {
        transform: translateX(calc(-1em * var(--distance-sine))) translateZ(calc(-150px * (1 - var(--distance-percent)))) rotateY(calc(-60deg * var(--distance-sine)));
    }

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

.stagger-it:hover {
    color: #00c9b1;
}

.stretch-it .char {
    transition: transform 0.5s cubic-bezier(0.8, 0, 0, 0.9);
}

.stretch-it:hover .char {
    transform: scale(0.8, 0.8);
}

.stretch-it .char:hover {
    transform: scale(0.9, 1.5);
    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: #fff;
        transition: transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
        transition-delay: calc(0.2s + (0.02s * (var(--char-index))));
    }

    .slide-vertical .char:before,
    .slide-horizontal .char:before {
        color: #00c9b1;
        transition-delay: calc(0.02s * (var(--char-index)));
    }

.slide-vertical:hover .char:before,
.slide-horizontal:hover .char:before {
    transition-delay: calc(0.2s + (0.02s * (var(--char-index))));
}

.slide-vertical:hover .char:after,
.slide-horizontal:hover .char:after {
    transition-delay: calc(0.02s * (var(--char-index)));
}


.slide-vertical.ON .char:before,
.slide-horizontal.ON .char:before {
    transition-delay: calc(0.2s + (0.02s * (var(--char-index))));
}

.slide-vertical.ON .char:after,
.slide-horizontal.ON .char:after {
    transition-delay: calc(0.02s * (var(--char-index)));
}



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

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

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

.slide-vertical.ON .char:before {
    transform: translateY(0%);
}

.slide-vertical.ON .char:after {
    transform: translateY(100%);
}

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

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

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

.slide-horizontal.ON .char:after {
    transform: translateX(-110%);
}
/* ---------------------------------- */
.fall-out .char {
    transition: 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: #fff;
        -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;
}

.fall-out.ON .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;
}
.fall-out.ON .char:after {
    -webkit-animation-name: fall-out;
    animation-name: fall-out;
}

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

    20% {
        opacity: 0;
    }

    100% {
        transform: translateY(0%) rotate(0deg);
        opacity: 1;
    }
}

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

    20% {
        opacity: 0;
    }

    100% {
        transform: translateY(0%) rotate(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes fall-out {
    50% {
        transform: translateY(10%) rotate(15deg);
        transform-origin: bottom left;
        opacity: 1;
    }

    100% {
        transform: translateY(250%) rotate(120deg);
        transform-origin: center center;
        opacity: 0;
    }
}

@keyframes fall-out {
    50% {
        transform: translateY(10%) rotate(15deg);
        transform-origin: bottom left;
        opacity: 1;
    }

    100% {
        transform: translateY(250%) rotate(120deg);
        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: #fff;
            transition: transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97);
            transition-delay: calc( 0.04s * var(--char-total) + (0.08s * var(--char-index)) );
        }


        .run-out .char:before {
            transform: translateX(-100vw) rotate(-35deg);
            transition-delay: calc(0.04s * var(--char-index));
        }

    .run-out:hover .char:before {
        transform: translateX(0) rotate(0deg);
        transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) );
    }

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

    .run-out.ON .char:after {
        transform: translateX(100vw) rotate(35deg);
        transition-delay: calc((0.04s * (var(--char-total) - var(--char-index))));
    }

/* ---------------------------------- */
.shift-right:before {
    content: "";
    font: inherit;
    vertical-align: 0.1em;
    display: inline-block;
    transform: scaleY(0) translateX(-1em);
    margin-right: -0.25em;
}

.shift-right:before,
.shift-right .char {
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
    transition-delay: calc(0.015s * var(--char-index));
}

.shift-right .char {
    transform: translateX(-0.15em);
}

.shift-right:hover:before {
    transform: scaleY(1) translateX(0em);
   
}

.shift-right:hover .char {
    transform: translateX(1em);
    transform: translateX(0.5em) translateX(calc(0.1em * var(--char-index)));
}
/* ----------CUSTOM MENU HOME SERVICIOS ------------------------ */

.shift-rightServicios{
    width:100%;
    /*background-color:red;*/
}


.shift-rightServicios:before {
    content: "";
    font: inherit;
    vertical-align: 1vw;
    display: inline-block;
    transform: scaleY(0) translateX(-1em);
    margin-right: -6VW;
    /**/
    /*display: inline-block;
    content: "";*/
    border-top: .3rem solid #43918a;
    width: 4vw;
    /*margin: 0 1rem;
    transform: translateY(-1rem);*/
}

.shift-rightServicios:before,
.shift-rightServicios .char {
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
    transition-delay: calc(0.015s * var(--char-index));
}

.shift-rightServicios .char {
    transform: translateX(-0.15em);
}

/*******************************************************/
/****************ANIMACIONES CUSTOMIZADAS PARA CADA ITEM DEL MENU DE SERVCICIOS HOME***********************************/
/******************************************************/




/*movimiento hacia izquierda de linea*/
.itemServicioHOme:hover .shift-rightServicios:before {
    transform: scaleY(1) translateX(1em);
}
    .itemServicioHOme:hover .shift-rightServiciosLive:before {
        transform: scaleY(1) translateX(3vw);
        /*border-top: .3rem solid yellow!important;*/

    }
    .itemServicioHOme:hover .shift-rightServiciosSports:before {
        transform: scaleY(1) translateX(3.4vw);
        /*border-top: .3rem solid pink !important;*/
        width: 4VW;

    }
    .itemServicioHOme:hover .shift-rightServiciosSpaces:before {
        transform: scaleY(1) translateX(7vw);
        /*border-top: .3rem solid green !important;*/
        width: 4vw;
    }
    .itemServicioHOme:hover .shift-rightServiciosStudio:before {
        transform: scaleY(1) translateX(3.8vw);
        /*border-top: .3rem solid orange !important;*/
        width: 4vw;
    }
    .itemServicioHOme:hover .shift-rightServiciosInsights:before {
        transform: scaleY(1) translateX(10vw);
        /*border-top: .3rem solid orange !important;*/
        width: 4vw;
    }
    .itemServicioHOme:hover .shift-rightServiciosNewEnterteinment:before {
        transform: scaleY(1) translateX(33vw);
        /*border-top: .3rem solid orange !important;*/
        width: 4vw;
    }
.itemServicioHOme:hover .shift-rightServicios .char {
    transform: translateX(1em);
    transform: translateX(0.5em) translateX(calc(0.1em * var(--char-index)));
}



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

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

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

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

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

.inflate-it:hover .char {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transform: scale(calc(1 + (0.7 * (1 - var(--distance-percent))))) translateX(calc(-0.12em * var(--distance-sine)));
    transition-delay: calc(0.08s * var(--distance-percent));
}

/* ---------------------------------- */
.bounce-it .char {
    line-height: 1;
    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 {
        transform: translateY(0%) scale(1);
    }
}

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

@-webkit-keyframes bounce-char {
    20% {
        transform: translateY(0%) scale(1.3, 0.8);
    }

    70% {
        transform: translateY(-40%) scale(0.8, 1.2);
    }
}

@keyframes bounce-char {
    20% {
        transform: translateY(0%) scale(1.3, 0.8);
    }

    70% {
        transform: translateY(-40%) scale(0.8, 1.2);
    }
}
/* ---------------------------------- */
.wiggle-it:hover .char {
    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% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(6deg);
    }

    75% {
        transform: rotate(-6deg);
    }
}

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

    25% {
        transform: rotate(6deg);
    }

    75% {
        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 {
        transition: transform 0.8s cubic-bezier(0.75, 0, 0.25, 1);
        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: #fff;
        }

        .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 {
    transform: translateY(-45%) scaleY(0);
}

.zip-it.ON .char:before,
.split-it.ON .char:before {
    transform: translateY(-45%) scaleY(0);
}

.zip-it:hover .char:after,
.split-it:hover .char:after {
    transform: translateY(45%) scaleY(0);
}
.zip-it.ON .char:after,
.split-it:hover .char:after {
    transform: translateY(45%) scaleY(0);
}
.zip-it .char,
.zip-it .char:before,
.zip-it .char:after {
    transition-delay: calc(0.5s * (1 - var(--char-percent)));
}

.zip-it:hover .char,
.zip-it:hover .char:before,
.zip-it:hover .char:after {
    transition-delay: calc(0.5s * var(--char-percent));
}
.zip-it.ON .char,
.zip-it.ON .char:before,
.zip-it.ON .char:after {
    transition-delay: calc(0.5s * var(--char-percent));
}
/* ---------------------------------- */
.glitch-it .char,
.glitch-it .char:before,
.glitch-it .char:after {
    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;
        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(-0.5s * var(--char-index));
        animation-delay: calc(-0.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;
    }

.glitch-it.ON .char {
    color: rgba(255, 255, 255, 0.3);
    -webkit-animation-name: glitch-bounce;
    animation-name: glitch-bounce;
}

    .glitch-it.ON .char:before, .glitch-it.ON .char:after {
        opacity: 1;
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }

@-webkit-keyframes glitch-bounce {
    20% {
        transform: translate(-1%, 0%);
    }

    40% {
        transform: translate(14%, -2%);
    }

    50% {
        transform: translate(-5%, 5%);
    }

    65% {
        transform: translate(1%, -2%);
    }

    80% {
        transform: translate(-3%, 2%);
    }
}

@keyframes glitch-bounce {
    20% {
        transform: translate(-1%, 0%);
    }

    40% {
        transform: translate(14%, -2%);
    }

    50% {
        transform: translate(-5%, 5%);
    }

    65% {
        transform: translate(1%, -2%);
    }

    80% {
        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 {
    transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1);
    transition-duration: calc(0.3s + (0.03s * var(--distance-percent)));
}

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

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

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

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

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

/* ---------------------------------- */
.elevate-it {
    perspective: 400px;
    transform-style: preserve-3d;
}

    .elevate-it .char {
        transition: transform 0.8s cubic-bezier(0.5, 0, 0, 0.9);
        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: #000;
            opacity: 0.85;
            transform: translateY(0%) rotateX(45deg) scale(1, 0);
            transform-origin: center 80%;
        }

        .elevate-it .char:after {
            color: #fff;
        }

    .elevate-it:hover .char:before {
        transform: translateY(0%) rotateX(55deg) scale(0.8);
        transform: translateY(0%) rotateX(55deg) scale(0.8, calc(0.4 + (0.4 * (1 - var(--distance-percent)))));
    }

    .elevate-it:hover .char:after {
        transform: translateY(-20%) 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 {
    transition: color 0.6s linear;
    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%);
}
/* ---------------------------------- */
/* -------------EN USO --------------------- */

/* ---------------------------------- */
.pop-out .char {
    color: #00c9b1;
}

    .pop-out .char:after {
        visibility: visible;
        color: #fff;
        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-iteration-count: 1;
        animation-iteration-count: 1;
        -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;
}

.pop-out.ON .char:after {
    -webkit-animation-name: pop-char-out;
    animation-name: pop-char-out;
}


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

    35% {
        transform: translate(0.05em, -0.1em);
    }
}

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

    35% {
        transform: translate(0.05em, -0.1em);
    }
}
/* ---------------------------------- */
.pop-out-color .char {
    color: #000;
    -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: #fff;
        z-index: 1;
        -webkit-animation: inherit;
        animation: inherit;
    }

    .pop-out-color .char:after {
        color: #fff;
        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% {
        transform: translate(0em, 0em);
    }

    35% {
        transform: translate(0.025em, -0.05em);
    }
}

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

    35% {
        transform: translate(0.025em, -0.05em);
    }
}