@keyframes hue_roatate {
  0%{
      filter: hue-rotate(0deg);
  }
 100%{
      filter: hue-rotate(360deg);
  }
}
   
  @keyframes  Blurhue_roatate {
  0%{
      filter: hue-rotate(0deg) blur(2vw);
  }
 100%{
      filter: hue-rotate(360deg) blur(2vw);
  } 
 }
 @keyframes  lowBlurhue_roatate {
    0%{
        filter: hue-rotate(0deg) blur(0.02vw);
        -webkit-filter: hue-rotate(0deg) blur(0.02vw);
}
   100%{
        filter: hue-rotate(360deg) blur(0.02vw);
        -webkit-filter: hue-rotate(360deg) blur(0.02vw);
} 
   }
  @keyframes card-animation2 {
0%{
 box-shadow :3vw 0px 5vw 6vw #790000, -3vw 0px 5vw 6vw #790000, inset 0vw 0vw 2.8vw 2vw black;
}
100%{
box-shadow :1vw 0px 5vw 2vw #944848, -1vw 0px 5vw 2vw #944848,inset 0vw 0vw 2.8vw 2vw black;
}
}
@keyframes spaceboots {
0% { -webkit-transform: scale(1.0)  translate(2px, 1px) rotate(0deg);} 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: scale(1.12) translate(0px, 0px) rotate(0deg);}
}  
@keyframes animatation_hueRotate {
 0%{
     filter: hue-rotate(0deg);
     transform: rotate(0deg);
       } 
 100%{
     filter: hue-rotate(360deg);
     transform: rotate(360deg); 
 }
}

@keyframes animateWave {
    0%{ background-position-x: 1000px ;}
    100%{ background-position-x: 0px ;}
    }
    @keyframes animateWave_2 {
    0%{ background-position-x: 0px ;}
    100%{ background-position-x: 1000px ;}
    }
    @keyframes FocusONinput {
        0%{
        font-size: 20px;
        transform: translateY(0px);
        }
        60%{
            font-size: 10px;  
        transform: translateY(-22px);
        }
        100%{
        font-size: 20px;
        transform: translateY(-36px);  
        }
    }
    @keyframes FocusONinputres {
        0%{
        font-size: 20px;
        transform: translateY(0px);
        }
        50%{
            font-size: 10px;  
        transform: translateY(-22px);
        }
        80%{
        font-size: 20px;
        transform: translateY(-36px);  
        }
        100%{
                font-size: 10px;  
            transform: translateY(-24px);
            }
        }
    @keyframes Expanded {
        100%{width: 25vw;}
        
    }
 
    /* Animation of the preloader */
@keyframes spinner {
    to {
        filter: hue-rotate(360deg);
        transform: rotateZ(360deg);
    }
}

/* Animation of letters loading from the preloader */
@keyframes characters {

    0%,
    75%,
    100% {
        opacity: 0;
        transform: rotateY(-90deg);
    }

    25%,
    50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}
 
    @keyframes transback { 
    100%{
    background: transparent;
    }
    }

    @keyframes vanish {
        0%{
            opacity: 1;
             left: 0;
 
        }
        100%{
            opacity: 0; 
              left: -45vw;
         }
    }   
    @keyframes transformscaleanim {
        0%{ transform:scale(0) ; -webkit-transform:scale(0) ; -moz-transform:scale(0) ; -ms-transform:scale(0) ; -o-transform:scale(0) ; }
        100%{ transform:scale(1) ; -webkit-transform:scale(1) ; -moz-transform:scale(1) ; -ms-transform:scale(1) ; -o-transform:scale(1) ; }
        
    }