/* ==========================================================================
   LIBRERÍAS — Animaciones Personalizadas
   ========================================================================== */
@keyframes rotateme {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotateme {
  from {
    -moz-transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes rotateme {
  from {
    -o-transform: rotate(0deg);
  }

  to {
    -o-transform: rotate(360deg);
  }
}




@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}



@-webkit-keyframes float-bob {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }

  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
}

@keyframes float-bob {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }

  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
}




.float-bob {
  animation-name: float-bob;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  -webkit-animation-name: float-bob;
  -webkit-animation-duration: 7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-animation-name: float-bob;
  -moz-animation-duration: 7s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  -ms-animation-name: float-bob;
  -ms-animation-duration: 7s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  -o-animation-name: float-bob;
  -o-animation-duration: 7s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}







/*** 
=============================================
    Animación Círculo
=============================================
***/
@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

/*** 
=============================================
    Animación Zoom (Entrada/Salida)
=============================================
***/


@-webkit-keyframes zoomInOut {
  0% {
    -webkit-transform: rotate(0deg) scale(0.7);
    transform: rotate(0deg) scale(0.7);
    opacity: 0;
  }

  50% {
    -webkit-transform: rotate(180deg) scale(1);
    transform: rotate(180deg) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: rotate(360deg) scale(0.7);
    transform: rotate(360deg) scale(0.7);
    opacity: 0;
  }
}

@keyframes zoomInOut {
  0% {
    transform: rotate(0deg) scale(0.7);
    opacity: 0;
  }

  50% {
    transform: rotate(180deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: rotate(360deg) scale(0.7);
    opacity: 0;
  }
}




/*** 
=============================================
    Animación Zoom Secundaria (Entrada/Salida)
=============================================
***/


@-webkit-keyframes zoomInOut-2 {
  0% {
    -webkit-transform: rotate(0deg) scale(0.7);
    transform: rotate(0deg) scale(0.7);
    opacity: .50;
  }

  50% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity: .50;
  }

  100% {
    -webkit-transform: rotate(0deg) scale(0.7);
    transform: rotate(0deg) scale(0.7);
    opacity: .50;
  }
}

@keyframes zoomInOut-2 {
  0% {
    transform: rotate(0deg) scale(0.7);
    opacity: .50;
  }

  50% {
    transform: rotate(0deg) scale(1);
    opacity: .50;
  }

  100% {
    transform: rotate(0deg) scale(0.7);
    opacity: .50;
  }
}

  @-webkit-keyframes bgSlideReverse {
    0% {
      background-position: 0 0;
    }

    20% {
      background-position: 100px 0;
    }

    40% {
      background-position: 200px 0;
    }

    60% {
      background-position: 150px 0;
    }

    80% {
      background-position: 100px 0;
    }

    100% {
      background-position: 0px 0;
    }
  }

  @keyframes bgSlideReverse {
    0% {
      background-position: 0 0;
    }

    20% {
      background-position: 100px 0;
    }

    40% {
      background-position: 200px 0;
    }

    60% {
      background-position: 150px 0;
    }

    80% {
      background-position: 100px 0;
    }

    100% {
      background-position: 0px 0;
    }
  }



  @-webkit-keyframes bgSlideReverse2 {
    0% {
      background-position: -0 0;
    }

    20% {
      background-position: -100px 0;
    }

    40% {
      background-position: -200px 0;
    }

    60% {
      background-position: -150px 0;
    }

    80% {
      background-position: -100px 0;
    }

    100% {
      background-position: -0px 0;
    }
  }

  @keyframes bgSlideReverse2 {
    0% {
      background-position: -0 0;
    }

    20% {
      background-position: -100px 0;
    }

    40% {
      background-position: -200px 0;
    }

    60% {
      background-position: -150px 0;
    }

    80% {
      background-position: -100px 0;
    }

    100% {
      background-position: -0px 0;
    }
  }


    50% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }

    100% {
      -webkit-transform: translateX(-1000px);
      transform: translateX(-1000px);
    }
  }


    50% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }

    100% {
      -webkit-transform: translateX(-1000px);
      transform: translateX(-1000px);
    }
  }








  @-webkit-keyframes ripple {
    70% {
      box-shadow: 0 0 0 40px rgba(10, 165, 205, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
    }
  }

  @keyframes ripple {
    70% {
      box-shadow: 0 0 0 40px rgba(10, 165, 205, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
    }
  }


  /*** 
=============================================
    Animación Personalizada 1
=============================================
***/
  @-webkit-keyframes animation1 {

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

    25%,
    75% {
      -webkit-transform: rotate(5deg) translateX(15px);
      transform: rotate(5deg) translateX(15px);
    }

    50% {
      -webkit-transform: rotate(10deg) translateX(30px);
      transform: rotate(10deg) translateX(30px);
    }
  }

  @keyframes animation1 {

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

    25%,
    75% {
      -webkit-transform: rotate(5deg) translateX(15px);
      transform: rotate(5deg) translateX(15px);
    }

    50% {
      -webkit-transform: rotate(10deg) translateX(30px);
      transform: rotate(10deg) translateX(30px);
    }
  }



  /*** 
=============================================
    Animación Personalizada 2
=============================================
***/
  @-webkit-keyframes animation2 {
    0% {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg)
    }

    100% {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg)
    }
  }

  @-moz-keyframes animation2 {
    0% {
      -moz-transform: rotateY(0deg);
      transform: rotateY(0deg)
    }

    100% {
      -moz-transform: rotateY(360deg);
      transform: rotateY(360deg)
    }
  }

  @-o-keyframes animation2 {
    0% {
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg)
    }

    100% {
      -o-transform: rotateY(360deg);
      transform: rotateY(360deg)
    }
  }

  @keyframes animation2 {
    0% {
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg)
    }

    100% {
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      transform: rotateY(360deg)
    }
  }









  @-webkit-keyframes bgSlide {
    0% {
      background-position: 0 0;
    }

    20% {
      background-position: -100px 0;
    }

    40% {
      background-position: -200px 0;
    }

    60% {
      background-position: -150px 0;
    }

    80% {
      background-position: -100px 0;
    }

    100% {
      background-position: 0px 0;
    }
  }


  @keyframes bgSlide {
    0% {
      background-position: 0 0;
    }

    20% {
      background-position: -100px 0;
    }

    40% {
      background-position: -200px 0;
    }

    60% {
      background-position: -150px 0;
    }

    80% {
      background-position: -100px 0;
    }

    100% {
      background-position: 0px 0;
    }
  }

  @-webkit-keyframes bgSlideReverse {
    0% {
      background-position: 0 0;
    }

    20% {
      background-position: 100px 0;
    }

    40% {
      background-position: 200px 0;
    }

    60% {
      background-position: 150px 0;
    }

    80% {
      background-position: 100px 0;
    }

    100% {
      background-position: 0px 0;
    }
  }

  @keyframes bgSlideReverse {
    0% {
      background-position: 0 0;
    }

    20% {
      background-position: 100px 0;
    }

    40% {
      background-position: 200px 0;
    }

    60% {
      background-position: 150px 0;
    }

    80% {
      background-position: 100px 0;
    }

    100% {
      background-position: 0px 0;
    }
  }

  @-webkit-keyframes ribbonRotate {

    0%,
    100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }

    25%,
    75% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    50% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
  }

  @keyframes ribbonRotate {

    0%,
    100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }

    25%,
    75% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    50% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
  }



  @-webkit-keyframes footerFish {

    0%,
    100% {
      -webkit-transform: translateX(0) translateY(0) rotate(0);
      transform: translateX(0) translateY(0) rotate(0);
    }

    25%,
    75% {
      -webkit-transform: translateX(20px) translateY(30px) rotate(25deg);
      transform: translateX(20px) translateY(30px) rotate(25deg);
    }

    50% {
      -webkit-transform: translateX(40px) translateY(60px) rotate(45deg);
      transform: translateX(40px) translateY(60px) rotate(45deg);
    }
  }

  @keyframes footerFish {

    0%,
    100% {
      -webkit-transform: translateX(0) translateY(0) rotate(0);
      transform: translateX(0) translateY(0) rotate(0);
    }

    25%,
    75% {
      -webkit-transform: translateX(20px) translateY(30px) rotate(25deg);
      transform: translateX(20px) translateY(30px) rotate(25deg);
    }

    50% {
      -webkit-transform: translateX(40px) translateY(60px) rotate(45deg);
      transform: translateX(40px) translateY(60px) rotate(45deg);
    }
  }

  @-webkit-keyframes contactSwimmer {

    0%,
    100% {
      -webkit-transform: translateX(0) translateY(0) rotate(0);
      transform: translateX(0) translateY(0) rotate(0);
    }

    25%,
    75% {
      -webkit-transform: translateX(15px) translateY(20px) rotate(10deg);
      transform: translateX(15px) translateY(20px) rotate(10deg);
    }

    50% {
      -webkit-transform: translateX(60px) translateY(35px) rotate(15deg);
      transform: translateX(60px) translateY(35px) rotate(15deg);
    }
  }

  @keyframes contactSwimmer {

    0%,
    100% {
      -webkit-transform: translateX(0) translateY(0) rotate(0);
      transform: translateX(0) translateY(0) rotate(0);
    }

    25%,
    75% {
      -webkit-transform: translateX(15px) translateY(20px) rotate(10deg);
      transform: translateX(15px) translateY(20px) rotate(10deg);
    }

    50% {
      -webkit-transform: translateX(60px) translateY(35px) rotate(15deg);
      transform: translateX(60px) translateY(35px) rotate(15deg);
    }
  }




  /*** 
=============================================
    Animación Flotante Vertical (Y)
=============================================
***/
  @-webkit-keyframes float-bob-y {
    0% {
      transform: translateY(-20px);
    }

    50% {
      transform: translateY(-10px);
    }

    100% {
      transform: translateY(-20px);
    }
  }

  @keyframes float-bob-y {
    0% {
      transform: translateY(-20px);
    }

    50% {
      transform: translateY(-10px);
    }

    100% {
      transform: translateY(-20px);
    }
  }

  .float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }


    25%,
    75% {
      -webkit-transform: rotate(5deg) translateX(15px);
      transform: rotate(5deg) translateX(15px);
    }

    50% {
      -webkit-transform: rotate(10deg) translateX(30px);
      transform: rotate(10deg) translateX(30px);
    }
  }


    25%,
    75% {
      -webkit-transform: rotate(5deg) translateX(15px);
      transform: rotate(5deg) translateX(15px);
    }

    50% {
      -webkit-transform: rotate(10deg) translateX(30px);
      transform: rotate(10deg) translateX(30px);
    }
  }




  @-webkit-keyframes service_hexagon_2 {
    0% {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg)
    }

    100% {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg)
    }
  }

  @-moz-keyframes service_hexagon_2 {
    0% {
      -moz-transform: rotateY(0deg);
      transform: rotateY(0deg)
    }

    100% {
      -moz-transform: rotateY(360deg);
      transform: rotateY(360deg)
    }
  }

  @-o-keyframes service_hexagon_2 {
    0% {
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg)
    }

    100% {
      -o-transform: rotateY(360deg);
      transform: rotateY(360deg)
    }
  }

  @keyframes service_hexagon_2 {
    0% {
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg)
    }

    100% {
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      transform: rotateY(360deg)
    }
  }



  @keyframes bgSlide {
    0% {
      background-position: 0 0;
    }

    20% {
      background-position: -100px 0;
    }

    40% {
      background-position: -200px 0;
    }

    60% {
      background-position: -150px 0;
    }

    80% {
      background-position: -100px 0;
    }

    100% {
      background-position: 0px 0;
    }
  }


    to {
      transform: rotate(360deg);
    }
  }


    to {
      transform: rotate(360deg);
    }
  }


    to {
      transform: rotate(360deg);
    }
  }


    to {
      transform: rotate(360deg);
    }
  }


  /*--------------------------------------------------------------
# Animaciones
--------------------------------------------------------------*/


    30% {
      transform: translateY(30px) translateX(50px) rotate(15deg);
      transform-origin: center center;
    }

    50% {
      transform: translateY(50px) translateX(100px) rotate(45deg);
      transform-origin: right bottom;
    }

    80% {
      transform: translateY(30px) translateX(50px) rotate(15deg);
      transform-origin: left top;
    }

    100% {
      transform: translateY(0px) translateX(0) rotate(0);
      transform-origin: center center;
    }
  }


    30% {
      transform: translateY(30px) translateX(50px) rotate(15deg);
      transform-origin: center center;
    }

    50% {
      transform: translateY(50px) translateX(100px) rotate(45deg);
      transform-origin: right bottom;
    }

    80% {
      transform: translateY(30px) translateX(50px) rotate(15deg);
      transform-origin: left top;
    }

    100% {
      transform: translateY(0px) translateX(0) rotate(0);
      transform-origin: center center;
    }
  }


    50% {
      transform: perspective(400px) rotate(0deg) translateZ(20px) translateY(20px) translateX(20px);
    }
  }


    50% {
      transform: perspective(400px) rotate(0deg) translateZ(20px) translateY(20px) translateX(20px);
    }
  }


    50% {
      -webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
      transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
    }
  }


    50% {
      -webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
      transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
    }
  }



    30% {
      transform: rotate3d(0, 0, 1, 5deg);
    }

    60% {
      transform: rotate3d(1, 0, 0, 0deg);
    }

    80% {
      transform: rotate3d(0, 0, 1, 5deg);
    }

    100% {
      transform: rotate3d(0, 1, 0, 0deg);
    }
  }


    30% {
      -webkit-transform: rotate3d(0, 0, 1, 15deg);
      transform: rotate3d(0, 0, 1, 15deg);
    }

    60% {
      -webkit-transform: rotate3d(1, 0, 0, 0deg);
      transform: rotate3d(1, 0, 0, 0deg);
    }

    80% {
      -webkit-transform: rotate3d(0, 0, 1, 15deg);
      transform: rotate3d(0, 0, 1, 15deg);
    }

    100% {
      -webkit-transform: rotate3d(0, 1, 0, 0deg);
      transform: rotate3d(0, 1, 0, 0deg);
    }

  }



    20%,
    60% {
      transform: translate(20px, 40px) rotate(180deg);
    }

    30%,
    80% {
      transform: translate(40px, 60px) rotate(0deg);
    }
  }


    20%,
    60% {
      transform: translate(20px, 40px) rotate(180deg);
    }

    30%,
    80% {
      transform: translate(40px, 60px) rotate(0deg);
    }
  }


    25%,
    75% {
      transform: rotate(5deg) translateX(15px);
    }

    50% {
      transform: rotate(10deg) translateX(30px);
    }
  }


    25%,
    75% {
      transform: rotate(5deg) translateX(15px);
    }

    50% {
      transform: rotate(10deg) translateX(30px);
    }
  }


  /*--------------------------------------------------------------
#     Desvanecimiento del zoom Css
--------------------------------------------------------------*/



    50% {
      transform: scale(1) translateX(-50%);
    }

    100% {
      transform: scale(0.9) translateX(-50%);
    }
  }


    50% {
      transform: scale(1) translateX(-50%);
    }

    100% {
      transform: scale(0.9) translateX(-50%);
    }
  }


  /*--------------------------------------------------------------
#     Desvanecimiento del zoom 2 Css
--------------------------------------------------------------*/



    50% {
      transform: scale(1) translateX(-50%) translateY(-50%);
    }

    100% {
      transform: scale(0.9) translateX(-50%) translateY(-50%);
    }
  }


    50% {
      transform: scale(1) translateX(-50%) translateY(-50%);
    }

    100% {
      transform: scale(0.9) translateX(-50%) translateY(-50%);
    }
  }




  /* custom animations */

  @keyframes btnIconMove {
    0% {
      transform: rotate(0deg) translate(0px, 0px);
    }

    50% {
      transform: rotate(20deg) translate(10px, 0px);
    }

    100% {
      transform: rotate(0deg) translate(0px, 0px);
    }
  }




  @-webkit-keyframes ImgBounce {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
    }
  }

  @keyframes ImgBounce {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
    }
  }


  .img-bounce {
    -webkit-animation: ImgBounce 5s ease-in-out 0s infinite alternate;
    animation: ImgBounce 5s ease-in-out 0s infinite alternate;
  }



  /** squares **/

  @-webkit-keyframes squares {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0
    }

    20% {
      -webkit-transform: scale(1.24);
      transform: scale(1.24);
      opacity: 1
    }

    100% {
      -webkit-transform: scale(2.1);
      transform: scale(2.1);
      opacity: 0
    }
  }

  @-moz-keyframes squares {
    0% {
      -moz-transform: scale(1);
      transform: scale(1);
      opacity: 0
    }

    20% {
      -moz-transform: scale(1.24);
      transform: scale(1.24);
      opacity: 1
    }

    100% {
      -moz-transform: scale(2.1);
      transform: scale(2.1);
      opacity: 0
    }
  }

  @-o-keyframes squares {
    0% {
      -o-transform: scale(1);
      transform: scale(1);
      opacity: 0
    }

    20% {
      -o-transform: scale(1.24);
      transform: scale(1.24);
      opacity: 1
    }

    100% {
      -o-transform: scale(2.1);
      transform: scale(2.1);
      opacity: 0
    }
  }

  @keyframes squares {
    0% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      opacity: 0
    }

    20% {
      -webkit-transform: scale(1.24);
      -moz-transform: scale(1.24);
      -o-transform: scale(1.24);
      transform: scale(1.24);
      opacity: 1
    }

    100% {
      -webkit-transform: scale(2.1);
      -moz-transform: scale(2.1);
      -o-transform: scale(2.1);
      transform: scale(2.1);
      opacity: 0
    }
  }

  /***
=============================================
   Animación Flotante Horizontal (X)
=============================================
***/


    50% {
      transform: translateX(-10px);
    }

    100% {
      transform: translateX(-30px);
    }
  }


    50% {
      transform: translateX(-10px);
    }

    100% {
      transform: translateX(-30px);
    }
  }



  /*** 
=============================================
    Animación Flotante Vertical Secundaria (Y2)
=============================================
***/


    50% {
      transform: translateY(-10px) translateX(-50%) rotate(0deg);
      ;
    }

    100% {
      transform: translateY(-20px) translateX(-50%) rotate(0deg);
      ;
    }
  }


    50% {
      transform: translateY(-10px) translateX(-50%) rotate(0deg);
      ;
    }

    100% {
      transform: translateY(-20px) translateX(-50%) rotate(0deg);
      ;
    }
  }