/* animation-start */
@keyframes animation-1 {
    0%  {transform: translateX(100%);}
    100%  {transform: translateX(0%);}
  }
  .hero-animation-1{
    animation-name: animation-1;
    animation-duration: 1s;
    position: relative;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    transform: translateX(0%);
    animation-fill-mode: both;
    overflow-x: hidden !important;
  }
  
  
  @keyframes animation-2 {
    0%  {transform: translateX(-100%); opacity: 0;}
    50%  { opacity: .5; }
    100%   {transform: translateX(0%); opacity: 1;}
  }
  .hero-animation-2{
    animation-name: animation-2;
    animation-duration: 1s;
    animation-delay: .8s;
    position: relative;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    transform: translateX(0%);
    animation-fill-mode: both;
  }
  
    
  @keyframes animation-3 {
    0%  {transform: translateY(-100%); opacity: 0; }
    50%  { opacity: .5; }
    100%   {transform: translateY(0%); opacity: 1;}
  }
  .hero-animation-3{
    animation-name: animation-3;
    animation-duration: .5s;
    animation-delay: 2s;
    position: relative;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: both;
  }
  
  @keyframes animation-4 {
    0%  {transform: translateY(100%); opacity: 0; }
    50%  { opacity: .5; }
    100%   {transform: translateY(0%); opacity: 1;}
  }
  .hero-animation-4{
    animation-name: animation-4;
    animation-duration: .5s;
    animation-delay: 2s;
    position: relative;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: both;
    text-shadow: 1px 5px 8px rgb(0, 0, 0);
  }

  .shake-effect:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }

  /* animation-end */