// .keyframes(fout) {
//   0% {
//@include transform(scale(1) translateX(0));
//   }

//   100% {
//@include transform(scale(0) translateX(0));
//   }
// }

@-ms-keyframes fout {
  0% {
    @include transform(scale(1) translateX(0));
  }
  100% {
    @include transform(scale(0) translateX(0));
  }
}
@-o-keyframes fout {
  0% {
    @include transform(scale(1) translateX(0));
  }
  100% {
    @include transform(scale(0) translateX(0));
  }
}
@-webkit-keyframes fout {
  0% {
    @include transform(scale(1) translateX(0));
  }
  100% {
    @include transform(scale(0) translateX(0));
  }
}
@-moz-keyframes fout {
  0% {
    @include transform(scale(1) translateX(0));
  }
  100% {
    @include transform(scale(0) translateX(0));
  }
}
@keyframes fout {
  0% {
    @include transform(scale(1) translateX(0));
  }
  100% {
    @include transform(scale(0) translateX(0));
  }
}


// ===================================
  @-webkit-keyframes anim-1 {
    0% {
      left: 50%;
    }

    100% {
      left: 90%;
    }
  }

  @-webkit-keyframes anim-2 { 
    0% {
      @include transform(rotate(-35deg));
    }

    25% {
      @include transform(rotate(-30deg));
    }

    50% {
      @include transform(rotate(-35deg));
    }

    75% {
      @include transform(rotate(-30deg));
    }

    100% {
      @include transform(rotate(-35deg));
    }
  }

  @-webkit-keyframes anim-3 {
    0% {
      @include transform(rotate(150deg));
      left: 50%;
    }

    50% {
      @include transform(rotate(150deg));
      left: 90%;
    }

    100% {
      @include transform(rotate(150deg));
      left: 50%;
    }
  }

  @-webkit-keyframes zoom-out {
    0% {
      @include transform(scale(1) rotate(-35deg));
    }

    100% {
      @include transform(scale(0) rotate(-180deg));
    }
  }

  @-webkit-keyframes zoom-in-state-1 {
    0% {
      @include transform(scale(0) rotate(-180deg));
    }

    100% {
      @include transform(scale(1) rotate(-35deg));
    }
  }

  @-webkit-keyframes zoom-in-state-2  {
    0% {
      @include transform(scale(0) rotate(-35deg));
    }

    100% {
      left: 50%;
      @include transform(scale(1) rotate(150deg));
    }
  }

  @-webkit-keyframes line {
    0% {
      left: 40%;
    }

    100% {
      left: 40%;
      width: 40%;
    }
  }

  // =======================================



  // ===================================
  @-moz-keyframes anim-1 {
    0% {
      left: 50%;
    }

    100% {
      left: 90%;
    }
  }

  @-moz-keyframes anim-2 { 
    0% {
      @include transform(rotate(-35deg));
    }

    25% {
      @include transform(rotate(-30deg));
    }

    50% {
      @include transform(rotate(-35deg));
    }

    75% {
      @include transform(rotate(-30deg));
    }

    100% {
      @include transform(rotate(-35deg));
    }
  }

  @-moz-keyframes anim-3 {
    0% {
      @include transform(rotate(150deg));
      left: 50%;
    }

    50% {
      @include transform(rotate(150deg));
      left: 90%;
    }

    100% {
      @include transform(rotate(150deg));
      left: 50%;
    }
  }

  @-moz-keyframes zoom-out {
    0% {
      @include transform(scale(1) rotate(-35deg));
    }

    100% {
      @include transform(scale(0) rotate(-180deg));
    }
  }

  @-moz-keyframes zoom-in-state-1 {
    0% {
      @include transform(scale(0) rotate(-180deg));
    }

    100% {
      @include transform(scale(1) rotate(-35deg));
    }
  }

  @-moz-keyframes zoom-in-state-2  {
    0% {
      @include transform(scale(0) rotate(-35deg));
    }

    100% {
      left: 50%;
      @include transform(scale(1) rotate(150deg));
    }
  }

  @-moz-keyframes line {
    0% {
      left: 40%;
    }

    100% {
      left: 40%;
      width: 40%;
    }
  }

  // =======================================


// ===================================
  @-o-keyframes anim-1 {
    0% {
      left: 50%;
    }

    100% {
      left: 90%;
    }
  }

  @-o-keyframes anim-2 { 
    0% {
      @include transform(rotate(-35deg));
    }

    25% {
      @include transform(rotate(-30deg));
    }

    50% {
      @include transform(rotate(-35deg));
    }

    75% {
      @include transform(rotate(-30deg));
    }

    100% {
      @include transform(rotate(-35deg));
    }
  }

  @-o-keyframes anim-3 {
    0% {
      @include transform(rotate(150deg));
      left: 50%;
    }

    50% {
      @include transform(rotate(150deg));
      left: 90%;
    }

    100% {
      @include transform(rotate(150deg));
      left: 50%;
    }
  }

  @-o-keyframes zoom-out {
    0% {
      @include transform(scale(1) rotate(-35deg));
    }

    100% {
      @include transform(scale(0) rotate(-180deg));
    }
  }

  @-o-keyframes zoom-in-state-1 {
    0% {
      @include transform(scale(0) rotate(-180deg));
    }

    100% {
      @include transform(scale(1) rotate(-35deg));
    }
  }

  @-o-keyframes zoom-in-state-2  {
    0% {
      @include transform(scale(0) rotate(-35deg));
    }

    100% {
      left: 50%;
      @include transform(scale(1) rotate(150deg));
    }
  }

  @-o-keyframes line {
    0% {
      left: 40%;
    }

    100% {
      left: 40%;
      width: 40%;
    }
  }

  // =======================================



// ===================================
  @keyframes anim-1 {
    0% {
      left: 50%;
    }

    100% {
      left: 90%;
    }
  }

  @keyframes anim-2 { 
    0% {
      @include transform(rotate(-35deg));
    }

    25% {
      @include transform(rotate(-30deg));
    }

    50% {
      @include transform(rotate(-35deg));
    }

    75% {
      @include transform(rotate(-30deg));
    }

    100% {
      @include transform(rotate(-35deg));
    }
  }

  @keyframes anim-3 {
    0% {
      @include transform(rotate(150deg));
      left: 50%;
    }

    50% {
      @include transform(rotate(150deg));
      left: 90%;
    }

    100% {
      @include transform(rotate(150deg));
      left: 50%;
    }
  }

  @keyframes zoom-out {
    0% {
      @include transform(scale(1) rotate(-35deg));
    }

    100% {
      @include transform(scale(0) rotate(-180deg));
    }
  }

  @keyframes zoom-in-state-1 {
    0% {
      @include transform(scale(0) rotate(-180deg));
    }

    100% {
      @include transform(scale(1) rotate(-35deg));
    }
  }

  @keyframes zoom-in-state-2  {
    0% {
      @include transform(scale(0) rotate(-35deg));
    }

    100% {
      left: 50%;
      @include transform(scale(1) rotate(150deg));
    }
  }

  @keyframes line {
    0% {
      left: 40%;
    }

    100% {
      left: 40%;
      width: 40%;
    }
  }

  // =======================================

  // ===================================
  @-ms-keyframes anim-1 {
    0% {
      left: 50%;
    }

    100% {
      left: 90%;
    }
  }

  @-ms-keyframes anim-2 { 
    0% {
      @include transform(rotate(-35deg));
    }

    25% {
      @include transform(rotate(-30deg));
    }

    50% {
      @include transform(rotate(-35deg));
    }

    75% {
      @include transform(rotate(-30deg));
    }

    100% {
      @include transform(rotate(-35deg));
    }
  }

  @-ms-keyframes anim-3 {
    0% {
      @include transform(rotate(150deg));
      left: 50%;
    }

    50% {
      @include transform(rotate(150deg));
      left: 90%;
    }

    100% {
      @include transform(rotate(150deg));
      left: 50%;
    }
  }

  @-ms-keyframes zoom-out {
    0% {
      @include transform(scale(1) rotate(-35deg));
    }

    100% {
      @include transform(scale(0) rotate(-180deg));
    }
  }

  @-ms-keyframes zoom-in-state-1 {
    0% {
      @include transform(scale(0) rotate(-180deg));
    }

    100% {
      @include transform(scale(1) rotate(-35deg));
    }
  }

  @-ms-keyframes zoom-in-state-2  {
    0% {
      @include transform(scale(0) rotate(-35deg));
    }

    100% {
      left: 50%;
      @include transform(scale(1) rotate(150deg));
    }
  }

  @-ms-keyframes line {
    0% {
      left: 40%;
    }

    100% {
      left: 40%;
      width: 40%;
    }
  }

  // =======================================