/*--------------------------------------------------------------

  +++  pulse animation ||  A Wave comes from a circle +++

---------------------------------------------------------------*/


@keyframes pulse_animate {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}


/*--------------------------------------------------------------

  +++  Zoom  animation ||  Increase size on animate +++

---------------------------------------------------------------*/

@keyframes zoom {
  0%{
    transform: scale(1, 1);
  }
  
  100%{
    transform: scale(1.5, 1.5);
  }

}





/*--------------------------------------------------------------

  +++  Fade  animation ||  Percentage of any item visibility +++

---------------------------------------------------------------*/
@keyframes fade {
           0% { opacity: 0.2 } 
          50% { opacity: 1 }
          100%{ opacity: 0.2 }
    }


/*----------------------------------------------

             Wave animation || Water Wave

-----------------------------------------------*/


    @keyframes  Wave_Water {
      0%{
        background-position-x: 1000px; 
      }
      100%{
        background-position-x: 0px; 
      }
    }


    @keyframes Reverse_Wave_Water {
      0%{
        background-position-x: 0px; 
      }
      100%{
        background-position-x: 1000px; 
      }
    }


/*------------------------------------------

       bubble animation

-------------------------------------------*/ 

@keyframes bubble {
  0% {
    transform: scale(0) translateY(0) rotate(70deg);
  }
  100% {
    transform: scale(1) translateY(-100px) rotate(360deg);
  }
}




/*------------------------------------------

       Rotate animation
       
-------------------------------------------*/ 

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}


/*------------------------------------------

       Reverse Rotate animation
       
-------------------------------------------*/ 

@keyframes Rotate-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes Rotate-reverse {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}


/*------------------------------------------

       Circle Rotate animation
       
-------------------------------------------*/ 

@keyframes circle-rotate {
  from {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@-webkit-keyframes circle-rotate {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(405deg);
  }
}



/*------------------------------------------

       Image Rotate animation
       
-------------------------------------------*/ 
@keyframes img-rotate {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-405deg);
  }
}

@-webkit-keyframes img-rotate {
  from {
    -webkit-transform: rotate(-45deg);
  }
  to {
    -webkit-transform: rotate(-405deg);
  }
}



/*------------------------------------------

        Animation for center circle
       
-------------------------------------------*/ 


@keyframes circle-move {
    0% {
        transform: rotate(0deg);
    }

    70% {
        transform: rotate(180deg);
    }

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


@keyframes circle-spin {
    0% {
        transform: rotate(0deg);
    }

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

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

@keyframes flicker {
    0% {
        opacity: 0.85;
    }

    100% {
        opacity: 1;
    }
}

/*------------------------------------------

         Image slide
       
-------------------------------------------*/
@keyframes img-slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-60rem);
    }
}