@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);
    }
  }


  .fade-in {
    animation-fill-mode: forwards;
    
    animation: fadeIn ease 1s forwards;
    -webkit-animation: fadeIn ease 1s forwards;
    -moz-animation: fadeIn ease 1s forwards;
    -o-animation: fadeIn ease 1s forwards;
    -ms-animation: fadeIn ease 1s forwards;
    }
    @keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }




    .fade-out {
      animation-fill-mode: forwards;
      
        animation: fadeOut ease 1s forwards;
        -webkit-animation: fadeOut ease 1s forwards;
        -moz-animation: fadeOut ease 1s forwards;
        -o-animation: fadeOut ease 1s forwards;
        -ms-animation: fadeOut ease 1s forwards;
        }
        @keyframes fadeOut {
            0% {opacity:1;}
            100% {opacity:0;}
        }
        
        @-moz-keyframes fadeOut {
            0% {opacity:1;}
            100% {opacity:0;}
        }
        
        @-webkit-keyframes fadeOut {
            0% {opacity:1;}
            100% {opacity:0;}
        }
        
        @-o-keyframes fadeOut {
            0% {opacity:1;}
            100% {opacity:0;}
        }
        
        @-ms-keyframes fadeOut {
        0% {opacity:1;}
        100% {opacity:0;}
        }