// Fly Cart Animation

.cart_boom {
  animation: cart_boom 0.3s ease-in-out 200ms 1 forwards;
}
@keyframes cart_boom {
  0% {
    transform: scale(1.2);
  }

  25% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* CSS Animation */

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

// .fadeIn {
//   -webkit-animation-name: fadeIn;
//   animation-name: fadeIn;
//   -webkit-animation-duration: 1s;
//   animation-duration: 1s;
//   -webkit-animation-fill-mode: both;
//   animation-fill-mode: both;
// }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.ins-icon-animation-one {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-transform-origin: 50% 100%;
}

.ins-icon-animation-two {
  -webkit-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-transform-origin: 50% 100%;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }

  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
  }

  20% {
    -webkit-transform: translate(-3px, 0px) rotate(3deg);
  }

  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(-2deg);
  }

  80% {
    -webkit-transform: translate(-1px, -1px) rotate(4deg);
  }

  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }

  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

/* CSS Animation */

/* Animation */

/* Animation One */

.ins_animate_one.ins-checkout-layout.slide {
  transition: 0.6s ease-in !important;
  top: auto;
  bottom: 0;
  height: 0;
}

.ins_animate_two.ins-checkout-layout.slide {
  transition: 0.6s ease-in !important;
  top: auto;
  bottom: 0;
  height: 0;
}

.ins_animate_one.ins-checkout-layout.slide {
  &.ins-var-cart-top {
    top: 0;
    bottom: auto;
  }

  &.ins-var-cart-middle {
    height: 100% !important;
  }
}

.ins_animate_two.ins-checkout-layout.slide.ins-var-cart-middle {
  height: 100% !important;
}

.ins_animate_one.ins-checkout-layout.slide.active,
.ins_animate_two.ins-checkout-layout.slide.active {
  transition: 0.4s ease-out !important;
  -webkit-transition: 0.4s ease-out !important;
  -moz-transition: 0.4s ease-out !important;
  -ms-transition: 0.4s ease-out !important;
  -o-transition: 0.4s ease-out !important;
}

.ins_animate_one.ins-checkout-layout.slide.ins-var-cart-top .ins-click-to-show,
.ins_animate_two.ins-checkout-layout.slide.ins-var-cart-top .ins-click-to-show {
  top: 30px !important;
}

// .ins_animate_one.ins-checkout-popup.popup .ins-checkout-layout,
// .ins_animate_two.ins-checkout-popup.popup .ins-checkout-layout {
//   transform: scale(0.1);
//   transition: 0.4s ease-in !important;
//   -webkit-transition: 0.4s ease-in !important;
//   -moz-transition: 0.4s ease-in !important;
//   -ms-transition: 0.4s ease-in !important;
//   -o-transition: 0.4s ease-in !important;
// }

// .ins_animate_one.ins-checkout-popup.popup.active .ins-checkout-layout,
// .ins_animate_two.ins-checkout-popup.popup.active .ins-checkout-layout {
//   transform: scale(1);
//   transition: 0.4s ease-out !important;
//   -webkit-transition: 0.4s ease-out !important;
//   -moz-transition: 0.4s ease-out !important;
//   -ms-transition: 0.4s ease-out !important;
//   -o-transition: 0.4s ease-out !important;
// }

// .ins_animate_one.ins-checkout-popup.popup.hide .ins-checkout-layout,
// .ins_animate_two.ins-checkout-popup.popup.hide .ins-checkout-layout {
//   transform: scale(0.1);
//   transition: 0.4s ease-out !important;
//   -webkit-transition: 0.4s ease-out !important;
//   -moz-transition: 0.4s ease-out !important;
//   -ms-transition: 0.4s ease-out !important;
//   -o-transition: 0.4s ease-out !important;
// }

.ins_animate_one.ins-checkout-layout.ins-checkout-layout-3.popup,
.ins_animate_two.ins-checkout-layout.ins-checkout-layout-3.popup {
  overflow: hidden !important;
  .ins-cart-inner.shipping {
    overflow-x: hidden;
  }
}

// .ins_animate_one.ins-checkout-layout.slide.active {

//   .ins-checkout-header,
//   .ins-content,
//   .ins-checkout-steps {
//     -webkit-animation-name: AnimateOneFadeInUp;
//     animation-name: AnimateOneFadeInUp;
//     -webkit-animation-duration: 1s;
//     animation-duration: 1s;
//     animation-delay: 0.5s;
//     -webkit-animation-fill-mode: both;
//     animation-fill-mode: both;
//   }
// }

// .ins-checkout-popup.slide.active .ins_animate_one.ins-checkout-layout {

//   .ins-checkout-header,
//   .ins-content,
//   .ins-checkout-steps {
//     -webkit-animation-name: AnimateOneFadeInUp;
//     animation-name: AnimateOneFadeInUp;
//     -webkit-animation-duration: 1s;
//     animation-duration: 1s;
//     animation-delay: 0.5s;
//     -webkit-animation-fill-mode: both;
//     animation-fill-mode: both;
//   }
// }

// .ins_animate_two.ins-checkout-layout.slide.active {

//   .ins-checkout-header,
//   .ins-content,
//   .ins-checkout-steps {
//     -webkit-animation-name: AnimateOneFadeInUp;
//     animation-name: AnimateOneFadeInUp;
//     -webkit-animation-duration: 1s;
//     animation-duration: 1s;
//     animation-delay: 0.5s;
//     -webkit-animation-fill-mode: both;
//     animation-fill-mode: both;
//   }
// }

.ins-checkout-popup.active .ins_animate_two.ins-checkout-layout {
  .ins-checkout-header,
  .ins-content,
  .ins-checkout-steps {
    -webkit-animation-name: AnimateOneFadeInUp;
    animation-name: AnimateOneFadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-delay: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
}

// .ins_animate_one.ins-checkout-layout.slide.active .ins-cart-inner {
//   -webkit-animation-name: AnimateOneFadeInUp;
//   animation-name: AnimateOneFadeInUp;
//   -webkit-animation-duration: 1s;
//   animation-duration: 1s;
//   animation-delay: 0.1s;
//   -webkit-animation-fill-mode: both;
//   animation-fill-mode: both;
// }

.ins-checkout-popup.active {
  .ins_animate_one.ins-checkout-layout
    .ins-cart-inner
    .ins_animate_two.ins-checkout-layout.slide.active
    .ins-cart-inner,
  .ins_animate_two.ins-checkout-layout .ins-cart-inner {
    -webkit-animation-name: AnimateOneFadeInUp;
    animation-name: AnimateOneFadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-delay: 0.1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
}

.ins_animate_two {
  &.ins-checkout-layout.slide.ins-var-cart-top {
    transform: translate(0, 0) !important;
    -webkit-transform: translate(0, 0) !important;
    -moz-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    -o-transform: translate(0, 0) !important;

    &.active {
      transform: translate(0, 0) !important;
      -webkit-transform: translate(0, 0) !important;
      -moz-transform: translate(0, 0) !important;
      -ms-transform: translate(0, 0) !important;
      -o-transform: translate(0, 0) !important;
    }
  }

  &.ins-checkout-layout-3.slide {
    transform: translate(0, 100%) !important;
    -webkit-transform: translate(0, 100%) !important;
    -moz-transform: translate(0, 100%) !important;
    -ms-transform: translate(0, 100%) !important;
    -o-transform: translate(0, 100%) !important;

    &.active {
      transform: translate(0, 0) !important;
      -webkit-transform: translate(0, 0) !important;
      -moz-transform: translate(0, 0) !important;
      -ms-transform: translate(0, 0) !important;
      -o-transform: translate(0, 0) !important;
    }
  }

  .ins-click-to-show.ins-toggle-btn.sidecart.tog-1 {
    left: auto;
    right: 90px;
    opacity: 1;
    visibility: visible;
    transition: 0.8s ease-in !important;
    -webkit-transition: 0.8s ease-in !important;
    -moz-transition: 0.8s ease-in !important;
    -ms-transition: 0.8s ease-in !important;
    -o-transition: 0.8s ease-in !important;
    right: auto;
    left: -90px;
  }

  &.active .ins-click-to-show.ins-toggle-btn.sidecart {
    transition: none !important;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease-in !important;
  }

  &.ins-checkout-layout {
    &.slide.ins-var-cart-middle {
      height: 100% !important;
      transform: translate(100%, 0) !important;
      -webkit-transform: translate(100%, 0) !important;
      -moz-transform: translate(100%, 0) !important;
      -ms-transform: translate(100%, 0) !important;
      -o-transform: translate(100%, 0) !important;

      &.active {
        transform: translate(0, 0) !important;
      }
    }

    &.ins-hori-left.slide {
      // &.ins-var-cart-bottom, &.ins-var-cart-top {
      //   transform: translate(100%, 0) !important;
      // }
      .ins-click-to-show.ins-toggle-btn.sidecart.tog-1 {
        right: -90px !important;
        left: auto !important;
      }

      &.ins-var-cart-bottom.active {
        transform: translate(0, 0) !important;
      }
    }

    &.slide.ins-var-cart-top {
      bottom: auto !important;
      top: 0 !important;

      &.active {
        bottom: auto !important;
        top: 0 !important;
      }
    }
  }

  .ins-checkout-header,
  .ins-content,
  .ins-checkout-steps {
    visibility: hidden;
    opacity: 0;
  }

  &.active {
    .ins-checkout-header,
    .ins-content,
    .ins-checkout-steps {
      visibility: visible;
      opacity: 1;
    }
  }

  &.ins-hori-left.ins-var-cart-middle
    .ins-click-to-show.ins-toggle-btn.sidecart.tog-1 {
    right: -90px !important;
  }

  &.ins-checkout-layout.slide {
    &.ins-hori-left.ins-var-cart-middle {
      transform: translate(0, 0) !important;
    }

    // &.ins-var-cart-top.ins-hori-left .ins-click-to-show.ins-toggle-btn.sidecart.tog-1 {
    //   right: auto !important;
    //   left: 60px !important;
    // }
  }

  &.ins-hori-left.ins-var-cart-bottom
    .ins-click-to-show.ins-toggle-btn.sidecart.tog-1 {
    top: -90px !important;
    left: 60px;
  }

  &.ins-hori-right .ins-toggle-btn.sidecart.tog-1 {
    left: auto !important;
    right: 60px !important;
  }
}

@-webkit-keyframes AnimateOneFadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes AnimateOneFadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.ins_animate_one.ins-checkout-layout.slide,
.ins_animate_one.ins-checkout-layout.slide.ins-hori-left,
.ins_animate_two.ins-checkout-layout.slide,
.ins_animate_two.ins-checkout-layout.slide.ins-hori-left {
  // width: var(--ins_panel_width_1200) !important;
}

.ins_animate_one.ins-checkout-layout.slide.ins-hori-left.active,
.ins_animate_one.ins-checkout-layout.slide.active,
.ins_animate_two.ins-checkout-layout.slide.ins-hori-left.active,
.ins_animate_two.ins-checkout-layout.slide.active {
  // width: var(--ins_panel_width_1200) !important;
  height: 100%;
}

.ins_animate_one.ins-checkout-layout.slide.ins-hori-left.active,
.ins_animate_two.ins-checkout-layout.slide.ins-hori-left.active {
  height: 100%;
  width: var(--ins_panel_width_1200) !important;
  left: 0 !important;
  right: auto;
}

/* Animation One */

/* Animation */