@keyframes logo {
    0% {
        fill: transparent;
        stroke-dashoffset: 7000;
        stroke-width: 25;

    }

    20% {
        stroke-dashoffset: 10;
        fill: transparent;
        stroke-width: 10;

    }

    20.2% {
        stroke-width: 5;
        stroke-dashoffset: 0;
        fill: #2ce1eb;
    }

    40% {
        stroke-width: 5;
        stroke-dashoffset: 0;
        fill: #2ce1eb;
    }

    50% {
        stroke-width: 0;
        stroke-dashoffset: 0;
        fill: #27c9d1;
    }

    70% {
        stroke-dashoffset: 0;
        fill: #27c9d1;
    }

    80% {
        stroke-dashoffset: 0;
        fill: #fff;
        stroke-width: 0;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #fff;
        stroke-width: 0;
    }
}

@keyframes logo2 {
    0% {
        fill: transparent;
        stroke-dashoffset: 7000;
        stroke-width: 25;

    }

    20% {
        stroke-dashoffset: 10;
        fill: transparent;
        stroke-width: 10;

    }

    20.2% {
        stroke-width: 5;
        stroke-dashoffset: 0;
        fill: #f50e95;
    }

    40% {
        stroke-width: 5;
        stroke-dashoffset: 0;
        fill: #f50e95;
    }

    50% {
        stroke-width: 0;

        stroke-dashoffset: 0;
        fill: #d6007d;
    }

    70% {
        stroke-dashoffset: 0;
        fill: #d6007d;
    }

    80% {
        stroke-dashoffset: 0;
        fill: #fff;
        stroke-width: 0;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #fff;
        stroke-width: 0;
    }
}

@keyframes bounce-left {

    0%,
    57%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    5%,
    63% {
        transform: translateX(0) rotate(0deg);
    }

    20% {
        transform: translateX(-11px) rotate(0deg);
    }

    25% {
        transform: translateX(0) rotate(0deg);
    }

    28% {
        transform: translateX(-5px) rotate(0deg);
    }

    35% {
        transform: translateX(0) rotate(0deg);
    }

    42% {
        transform: translateX(-2.5px) rotate(0deg);
    }

    57% {
        transform: translateX(0) rotate(360deg);
    }

    63% {
        transform: translateX(-1px) rotate(360deg);
    }

    70% {
        transform: translateX(0) rotate(360deg);
    }

    100% {
        transform: translateX(0) rotate(360deg);
    }
}

@keyframes contentButton {
    0% {
        opacity: 0;
        transform: translateY(250px);
    }

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

@keyframes down {
    0% {
        opacity: 0;
        transform: translateY(-250px);
        -webkit-transform: translateY(-250px);
        -moz-transform: translateY(-250px);
        -ms-transform: translateY(-250px);
        -o-transform: translateY(-250px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        content: 'ohoooooo';
    }
}

@keyframes recorrido {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);

    }

    50% {
        transform: scale(5);
        -webkit-transform: scale(5);
        -moz-transform: scale(5);
        -ms-transform: scale(5);
        -o-transform: scale(5);
        border:     21px solid rgb(152, 238, 255);
}

    100% {
        transform: scale(9);
        -webkit-transform: scale(9);
        -moz-transform: scale(9);
        -ms-transform: scale(9);
        -o-transform: scale(9);
        border: 25px solid rgb(132, 141, 240);
}
}



@keyframes personAnimation2 {

    19.6% {
        opacity: 1;
        width: 25vw;
        min-height: 1500px;
        opacity: 1;
        transform: translateX(-20px) translateY(0px);
        -webkit-transform: translateX(-40px) translateY(0px);
        -moz-transform: translateX(-40px) translateY(0px);
        -ms-transform: translateX(-40px) translateY(0px);
        -o-transform: translateX(-40px) translateY(0px);
        background-image: url('../img/f1.webp');
        z-index: 4;

    }

    20% {
        width: 55vw;
        opacity: 1;
        transform: translateX(0px) translateY(30px);
        background-image: url('../img/f2.webp');
        z-index: 10;
        -webkit-transform: translateX(0px) translateY(30px);
        -moz-transform: translateX(0px) translateY(30px);
        -ms-transform: translateX(0px) translateY(30px);
        -o-transform: translateX(0px) translateY(30px);
    }

    21% {
        width: 55vw;
        opacity: 0.5;
        transform: translateX(-20vw) translateY(0px);
        background-image: url('../img/f2.webp');
        z-index: 10;
        -webkit-transform: translateX(-20vw) translateY(0px);
        -moz-transform: translateX(-20vw) translateY(0px);
        -ms-transform: translateX(-20vw) translateY(0px);
        -o-transform: translateX(-20vw) translateY(0px);
    }

    22% {
        width: 55vw;
        opacity: 1;
        transform: translateX(-20vw) translateY(30px);
        background-image: url('../img/f2.webp');
        z-index: 10;
        -webkit-transform: translateX(-20vw) translateY(30px);
        -moz-transform: translateX(-20vw) translateY(30px);
        -ms-transform: translateX(-20vw) translateY(30px);
        -o-transform: translateX(-20vw) translateY(30px);
    }

    23% {
        width: 58vw;
        opacity: 0.5;
        transform: translateX(-24vw) translateY(-10px);
        background-image: url('../img/f2.webp');
        z-index: 10;
        -webkit-transform: translateX(-24vw) translateY(-10px);
        -moz-transform: translateX(-24vw) translateY(-10px);
        -ms-transform: translateX(-24vw) translateY(-10px);
        -o-transform: translateX(-24vw) translateY(-10px);
    }

    45% {
        width: 58vw;
        opacity: 1;
        transform: translateX(-24vw) translateY(-10px);
        background-image: url('../img/f2.webp');
        z-index: 10;
        -webkit-transform: translateX(-24vw) translateY(-10px);
        -moz-transform: translateX(-24vw) translateY(-10px);
        -ms-transform: translateX(-24vw) translateY(-10px);
        -o-transform: translateX(-24vw) translateY(-10px);
    }

    46% {
        width: 55vw;
        opacity: 1;
        transform: translateX(0px) translateY(-10px);
        background-image: url('../img/f2.webp');
        z-index: 10;
        -webkit-transform: translateX(0px) translateY(-10px);
        -moz-transform: translateX(0px) translateY(-10px);
        -ms-transform: translateX(0px) translateY(-10px);
        -o-transform: translateX(0px) translateY(-10px);
    }

    47% {
        width: 24vw;
        opacity: 1;
        transform: translateX(-20px) translateY(0px);
        background-image: url('../img/f1.webp');
        z-index: 1;
        min-height: 1500px;

    }


}

@keyframes personAnimation {
    0% {
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
    }


    25% {
        transform: translateX(-90px);
        -webkit-transform: translateX(-90px);
        -moz-transform: translateX(-90px);
        -ms-transform: translateX(-90px);
        -o-transform: translateX(-90px);
    }

    50% {
        transform: translateX(-280px);
        -webkit-transform: translateX(-280px);
        -moz-transform: translateX(-280px);
        -ms-transform: translateX(-280px);
        -o-transform: translateX(-280px);
    }

    75% {
        transform: translateX(-90px);
        -webkit-transform: translateX(-90px);
        -moz-transform: translateX(-90px);
        -ms-transform: translateX(-90px);
        -o-transform: translateX(-90px);
    }

    100% {
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
    }
}

@keyframes confettiAnimation {
    0% {
        transform: scale(0.8);
        background-position: -80% -80%;
    }

    50% {
        transform: scale(1);
        background-position: -20% -20%;
    }

    100% {
        transform: scale(0.8);
        /* Vuelve a la posición inicial */
        background-position: -80% -80%;
    }
}

@keyframes confettiAnimation2 {
    19.5% {
        transform: scale(0.8);
        background-position: -80% -80%;
        z-index: 1;
        opacity: 1;

    }

    20% {
        transform: scale(0.9);
        background-position: -80% -80%;
        z-index: 2;
        opacity: 0;
    }

    45% {
        transform: scale(0.93);
        background-position: -80% -80%;
        z-index: 4;
        opacity: 0.6;

    }

    45.5% {
        transform: scale(0.8);
        background-position: -80% -80%;
        z-index: 1;
        opacity: 1;

    }

}

@keyframes squaresAnimation {
    19.5% {
        width: 700px;
        height: 700px;
        top: 20%;
        left: 35%
    }

    20% {
        background-color: rgba(102, 0, 128, 0);
        width: 1200px;
        height: 1200px;
        left: 15%;
        top: 0%;
    }

    21% {
        background-color: rgba(0, 87, 128, 0.4);
        width: 1000px;
        height: 1000px;
        left: 35%;
        top: 0%;
        ;
    }

    22% {
        background-color: rgba(255, 255, 255, 0.3);
        top: 0%;
        left: 15%;
        width: 1200px;
        height: 1200px;
    }

    23% {
        background-color: rgba(233, 195, 243, 0.3);
        width: 1000px;
        height: 1000px;
        top: 0%;
        left: 35%;
    }

    40% {
        background-color: rgba(0, 32, 31, 0.3);
        width: 1000px;
        height: 1000px;
        border-radius: 0%;
        left: 35%;
        top: 0%;
    }

    41% {
        background-color: rgba(0, 81, 128, 0.4);
        width: 1000px;
        height: 1000px;
        left: 35%;
        top: 0%;

    }

    41.5% {
        background-color: rgba(102, 0, 128, 0);
        width: 700px;
        height: 700px;
        left: 35%;
        top: 20%;
    }

}

@keyframes bgcards {
    19.5% {
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 1) 6%, rgba(48, 43, 99, 1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 1) 6%, rgba(48, 43, 99, 1) 100%);
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 6%, rgba(48, 43, 99, 1) 100%);
    }

    20% {
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 81, 92) 100%);
        background: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 63, 92) 100%);
        background: linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 78, 92) 100%);
    }

    21% {
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(206, 249, 255) 100%);
        background: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(237, 249, 255) 100%);
        background: linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(222, 250, 255) 100%);
    }

    22% {
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 43, 92) 100%);
        background: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(35, 0, 92) 100%);
        background: linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(43, 0, 92) 100%);
    }

    23% {
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 43, 92) 100%);
        background: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(35, 0, 92) 100%);
        background: linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(43, 0, 92) 100%);
    }

    24% {
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 43, 92) 100%);
        background: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(35, 0, 92) 100%);
        background: linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(43, 0, 92) 100%);
    }

    45% {
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 81, 92) 100%);
        background: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 63, 92) 100%);
        background: linear-gradient(135deg, rgba(0, 0, 0, 1) 65%, rgb(0, 78, 92) 100%);
    }

    50% {
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 1) 6%, rgba(48, 43, 99, 1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 1) 6%, rgba(48, 43, 99, 1) 100%);
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 6%, rgba(48, 43, 99, 1) 100%);
    }
}

@keyframes titleSpanP {
    19.5% {
        font-size: 150px;opacity: 1;
    }

    20% {opacity: 0.2;
        font-size: 170px;

    }

    21% {opacity: 0.2;
        font-size: 190px;

    }

    22% {opacity: 0.2;
        font-size: 200px;

    }

    45% {opacity: 0.2;
        font-size: 200px;

    }

    46% {opacity: 1;
        font-size: 150px;

    }
}

@keyframes titleSpan {
    19.5% {
        font-size: 75px;
    }

    20% {opacity: 1;
        font-size: 105px;

    }

    21% {opacity: 0.2;
        font-size: 145px;

    }

    22% {
        font-size: 150px;

    }

    45% {opacity:1;
        font-size: 160px;

    }
    46% {opacity: 0.2;
        font-size: 160px;

    }
    47% {opacity: 1;
        font-size: 75px;

    }
}
@keyframes titleSpan3 {
    19.5% {opacity: 0;
        font-size: 175px;
    }

    20% {opacity: 0;
        font-size: 175px;

    }

    21% {opacity: 0;
        font-size: 175px;

    }

    22% {opacity: 1;
        font-size: 175px;

    }

    23% {opacity: 1;
        font-size: 115px;

    }

    24% {opacity: 1;
        font-size: 115px;

    }
}
@keyframes title {
    19.5% {
        top: 0px;
        font-size: 75px;
    }

    20% {
        top: 0px;
        font-size: 5vw;

    }

    21% { z-index: 4;
        top: -60px;
        font-size: 5vw;

    }

    22% {top: -100px;
        font-size: 8vw;
        z-index: 99999;

    }

    45% {top: -100px;
        font-size: 8vw;
        z-index: 99999;

    }

    46% {top: 0px;
        font-size: 75px;
        z-index: 4;

    }
}


  
  @keyframes textAnimate {
    0% {
      stroke-dasharray: 0 50%;
      stroke-dashoffset:  20%;
        fill: transparent;
    }
    20% {

        fill: transparent;
    
      }
      
    100% {
      stroke-dasharray: 50% 0;
      stroke-dashoffstet: -20%;
      fill: transparent;
    }
    
  }
  
  /* sign  */
  
@keyframes blink {
    0%,
    22%,
    36%,
    75% {
      color: #ffe6ff;
      text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
        -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
        0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    }
    28%,
    33% {
      color: #0c0c0c;
      text-shadow: none;
    }
    82%,
    97% {
      color: #080808;
      text-shadow: none;
    }
  }
  
  .flicker {
    animation: shine 2s forwards, blink 3s 2s infinite;
  }
  
  .fast-flicker {
    animation: shine 2s forwards, blink 10s 1s infinite;
  }
  
  @keyframes shine {
    0% {
      color: #6b1839;
      text-shadow: none;
    }
    100% {
      color: #ffe6ff;
      text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
        -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
        0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    }
  }
  
  @keyframes flicker {
    from {
      opacity: 1;
    }
  
    4% {
      opacity: 0.9;
    }
  
    6% {
      opacity: 0.85;
    }
  
    8% {
      opacity: 0.95;
    }
  
    10% {
      opacity: 0.9;
    }
  
    11% {
      opacity: 0.922;
    }
  
    12% {
      opacity: 0.9;
    }
  
    14% {
      opacity: 0.95;
    }
  
    16% {
      opacity: 0.98;
    }
  
    17% {
      opacity: 0.9;
    }
  
    19% {
      opacity: 0.93;
    }
  
    20% {
      opacity: 0.99;
    }
  
    24% {
      opacity: 1;
    }
  
    26% {
      opacity: 0.94;
    }
  
    28% {
      opacity: 0.98;
    }
  
    37% {
      opacity: 0.93;
    }
  
    38% {
      opacity: 0.5;
    }
  
    39% {
      opacity: 0.96;
    }
  
    42% {
      opacity: 1;
    }
  
    44% {
      opacity: 0.97;
    }
  
    46% {
      opacity: 0.94;
    }
  
    56% {
      opacity: 0.9;
    }
  
    58% {
      opacity: 0.9;
    }
  
    60% {
      opacity: 0.99;
    }
  
    68% {
      opacity: 1;
    }
  
    70% {
      opacity: 0.9;
    }
  
    72% {
      opacity: 0.95;
    }
  
    93% {
      opacity: 0.93;
    }
  
    95% {
      opacity: 0.95;
    }
  
    97% {
      opacity: 0.93;
    }
  
    to {
      opacity: 1;
    }
  }
  
  


@keyframes mainBlock {
    0% {
      width: 0%;
      left: 0;
  
    }
    50% {
      width: 50%;
      left: 0;
  
    }
    100% {
      width: 0;
      left: 100%;
    }
  }
  
  @keyframes secBlock {
    0% {
      width: 0%;
      left: 0;
  
    }
    50% {
      width: 50%;
      left: 0;
      background-color: #008990;
  
    }
    100% {
      width: 0;
      left: 70%;
    }
  }
  
  @keyframes mainFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  
  @keyframes popIn {
    0% {
      width: 0px;
      height: 0px;
      background: #e9d856;
      border: 0px solid #ddd;
      opacity: 0;
    }
    50% {
      width: 10px;
      height: 10px;
      background: #e9d856;
      opacity: 1;
      bottom: 45px;
    }
     65% {
        width: 7px;
      height: 7px;
        bottom: 0px;
        width: 15px
     }
     80% {
        width: 10px;
      height: 10px;
        bottom: 20px
     }
    100% {
      width: 7px;
      height: 7px;
      background: #e9d856;
      border: 0px solid #222;
      bottom: 13px;
  
    }
  }
  
  @keyframes secFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  
  
  
  @keyframes top {
    0% {
      opacity: 0;
       bottom: -80px
    }
    100% {
      opacity: 1;
       bottom: 0px
  
    }
  }
  
  @keyframes icon {
    0% {
      opacity: 0;
       transform: scale(0.0);
    }
     50% {
        opacity: 1;
       transform: scale(1.3) rotate(-02deg);
     }
    100% {
      opacity: 1;
       bottom: 0px;
    }
  }

  @-webkit-keyframes max-width {
    from {
      max-width: 0;
    }
    to {
      max-width: 100%;
    }
  }
  
  @keyframes max-width {
    0% {
      max-width: 0;        
      transform: scale(1.1);
      color: transparent!important;
      -webkit-text-stroke-width: 1.3px;
      transition: all 0.4s;
      -webkit-text-stroke-width: 1.3px;
      -webkit-text-stroke-color: #ffffff;
    }
    20% {
        transform: scale(1.2);
    }
   30% {
 
            transform: scale(1.6);
            color: transparent!important;

    }

    60% {
        transform: scale(1.2);
        max-width: 80%;
        color:#df78bc;
        -webkit-text-stroke-width: 1px;
        transition: all 0.4s;
  
      }
    100% {
      max-width: 100%;       
       transform: scale(1);
      color: #ffff;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: transparent;

      transition: all 0.4s;

    }
  }
  @-webkit-keyframes max-height {
    from {
      max-height: 0;
    }
    to {
      max-height: 100%;
    }
  }
  @keyframes max-height {
    from {
      max-height: 0;
    }
    to {
      max-height: 100%;
    }
  }