/* ==========================================================================
   SUBMIITED FORM SUCCESS VIEW

   These styles handle animation of the success message of forms that are completed.

   ========================================================================== */

   /* 
  // ANIMATION 

  // animation of success header flying in from top

  // @keyframes slideInFromTop {
  //   0% {
  //     transform: translateY(-100%);
  //   }
  //   100% {
  //     transform: translateY(0);
  //   }
  // }

  // .success-card {  
  //   This section calls the slideInFromLeft animation we defined above 
  //   animation: 1s ease-out 0s 1 slideInFromTop;
    
  //   //background: #333;
  //   //padding: 30px;
  // }

  */
  /*  animation of success card doing a squisshy jump on load of the success page/view */

  .jiggly-jump {
        animation-name: jiggly-jump;
        animation-delay: .5s;
        /* animation duration is set to 0 at default, but can be changed to a different value */
        animation-duration: 3s;
        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
    }
    @keyframes jiggly-jump {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-50px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
    }

/* test to see if native nesting works in css for the app */
.jiggly-jump {
    .test-color {
        color: red;
    }
}