.effeckt-list[data-effeckt-type='pop-in'] {
  overflow: hidden;
}

.effeckt-list[data-type='pop-in'] .new-item {
  max-height: 0;
  opacity: 0;
  -webkit-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
  -webkit-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards;
  animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards;
}

.effeckt-list[data-effeckt-type='pop-in'] .remove-item {
  max-height: 50px;
  opacity: 1;
  -webkit-animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms;
  animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms;
}

@-webkit-keyframes openSpace {
  to {
    max-height: 50px;
  }
}

@keyframes openSpace {
  to {
    max-height: 50px;
  }
}

@-webkit-keyframes moveIn {
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes moveIn {
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes moveOut {
  to {
    opacity: 0;
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
  }
}

@keyframes moveOut {
  to {
    opacity: 0;
    -webkit-transform: translateX(-300px);
    -ms-transform: translateX(-300px);
    transform: translateX(-300px);
  }
}

@-webkit-keyframes closeSpace {
  to {
    max-height: 0px;
  }

  from {
    max-height: 50px;
  }
}

@keyframes closeSpace {
  to {
    max-height: 0px;
  }

  from {
    max-height: 50px;
  }
}

.effeckt-list[data-effeckt-type='expand-in'] .new-item {
  max-height: 0;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-animation: growHeight 500ms ease forwards;
  animation: growHeight 500ms ease forwards;
}

.effeckt-list[data-effeckt-type='expand-in'] .remove-item {
  -webkit-animation: shrinkHeight 500ms ease forwards;
  animation: shrinkHeight 500ms ease forwards;
}

@-webkit-keyframes growHeight {
  to {
    max-height: 50px;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes growHeight {
  to {
    max-height: 50px;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes shrinkHeight {
  to {
    max-height: 0;
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  from {
    max-height: 50px;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes shrinkHeight {
  to {
    max-height: 0;
    opacity: 1;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  from {
    max-height: 50px;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.effeckt-list[data-effeckt-type='wobble-in'] .new-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards;
  animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards;
}

.effeckt-list[data-effeckt-type='wobble-in'] .remove-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms;
  animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms;
}

@-webkit-keyframes WobbleInX {
  0% {
    -webkit-transform: perspective(250px) rotateX(90deg);
    transform: perspective(250px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(250px) rotateX(-10deg);
    transform: perspective(250px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(250px) rotateX(10deg);
    transform: perspective(250px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(250px) rotateX(0deg);
    transform: perspective(250px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes WobbleInX {
  0% {
    -webkit-transform: perspective(250px) rotateX(90deg);
    -ms-transform: perspective(250px) rotateX(90deg);
    transform: perspective(250px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(250px) rotateX(-10deg);
    -ms-transform: perspective(250px) rotateX(-10deg);
    transform: perspective(250px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(250px) rotateX(10deg);
    -ms-transform: perspective(250px) rotateX(10deg);
    transform: perspective(250px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(250px) rotateX(0deg);
    -ms-transform: perspective(250px) rotateX(0deg);
    transform: perspective(250px) rotateX(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes WobbleOutX {
  0% {
    -webkit-transform: perspective(250px) rotateX(0deg);
    transform: perspective(250px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(250px) rotateX(90deg);
    transform: perspective(250px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes WobbleOutX {
  0% {
    -webkit-transform: perspective(250px) rotateX(0deg);
    -ms-transform: perspective(250px) rotateX(0deg);
    transform: perspective(250px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(250px) rotateX(90deg);
    -ms-transform: perspective(250px) rotateX(90deg);
    transform: perspective(250px) rotateX(90deg);
    opacity: 0;
  }
}

.effeckt-list[data-effeckt-type='flip-in'] .new-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards;
  animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards;
}

.effeckt-list[data-effeckt-type='flip-in'] .remove-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms;
  animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms;
}

@-webkit-keyframes FlipIn {
  0% {
    -webkit-transform: perspective(300px) rotateX(90deg);
    transform: perspective(300px) rotateX(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: perspective(300px) rotateX(0deg);
    transform: perspective(300px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes FlipIn {
  0% {
    -webkit-transform: perspective(300px) rotateX(90deg);
    -ms-transform: perspective(300px) rotateX(90deg);
    transform: perspective(300px) rotateX(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: perspective(300px) rotateX(0deg);
    -ms-transform: perspective(300px) rotateX(0deg);
    transform: perspective(300px) rotateX(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes FlipOut {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes FlipOut {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.effeckt-list[data-effeckt-type='fall-in'] .new-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: openSpace 1000ms ease forwards, fallInX 1000ms both;
  animation: openSpace 1000ms ease forwards, fallInX 1000ms both;
}

.effeckt-list[data-effeckt-type='fall-in'] .remove-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms;
  animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms;
}

@-webkit-keyframes fallInX {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fallInX {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes fallOffX {
  0% {
    opacity: 1;
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(200px) rotateZ(90deg);
    transform: translateY(200px) rotateZ(90deg);
  }
}

@keyframes fallOffX {
  0% {
    opacity: 1;
    -webkit-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    transform: rotateZ(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(200px) rotateZ(90deg);
    -ms-transform: translateY(200px) rotateZ(90deg);
    transform: translateY(200px) rotateZ(90deg);
  }
}

.effeckt-list[data-effeckt-type='from-above'] .new-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms;
  animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms;
}

.effeckt-list[data-effeckt-type='from-above'] .remove-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms;
  animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms;
}

@-webkit-keyframes fromAbove {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fromAbove {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes toAbove {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3);
  }
}

@keyframes toAbove {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
  }
}

.effeckt-list[data-effeckt-type='wobble-out'] .new-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: openSpace 1000ms ease forwards, fallInX 1000ms both;
  animation: openSpace 1000ms ease forwards, fallInX 1000ms both;
}

.effeckt-list[data-effeckt-type='wobble-out'] .remove-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms;
  animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms;
}

@-webkit-keyframes wobbleOutY {
  0% {
    opacity: 1;
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: rotateZ(140deg);
    transform: rotateZ(140deg);
  }

  40% {
    opacity: 1;
    -webkit-transform: rotateZ(60deg);
    transform: rotateZ(60deg);
  }

  60% {
    opacity: 1;
    -webkit-transform: rotateZ(110deg);
    transform: rotateZ(110deg);
  }

  70% {
    opacity: 1;
    -webkit-transform: rotateZ(90deg) translateX(0);
    transform: rotateZ(90deg) translateX(0);
  }

  90% {
    opacity: 1;
    -webkit-transform: rotateZ(90deg) translateX(400px);
    transform: rotateZ(90deg) translateX(400px);
  }

  100% {
    opacity: 0;
    -webkit-transform: rotateZ(90deg) translateX(400px);
    transform: rotateZ(90deg) translateX(400px);
  }
}

@keyframes wobbleOutY {
  0% {
    opacity: 1;
    -webkit-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    transform: rotateZ(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: rotateZ(140deg);
    -ms-transform: rotateZ(140deg);
    transform: rotateZ(140deg);
  }

  40% {
    opacity: 1;
    -webkit-transform: rotateZ(60deg);
    -ms-transform: rotateZ(60deg);
    transform: rotateZ(60deg);
  }

  60% {
    opacity: 1;
    -webkit-transform: rotateZ(110deg);
    -ms-transform: rotateZ(110deg);
    transform: rotateZ(110deg);
  }

  70% {
    opacity: 1;
    -webkit-transform: rotateZ(90deg) translateX(0);
    -ms-transform: rotateZ(90deg) translateX(0);
    transform: rotateZ(90deg) translateX(0);
  }

  90% {
    opacity: 1;
    -webkit-transform: rotateZ(90deg) translateX(400px);
    -ms-transform: rotateZ(90deg) translateX(400px);
    transform: rotateZ(90deg) translateX(400px);
  }

  100% {
    opacity: 0;
    -webkit-transform: rotateZ(90deg) translateX(400px);
    -ms-transform: rotateZ(90deg) translateX(400px);
    transform: rotateZ(90deg) translateX(400px);
  }
}

.effeckt-list[data-effeckt-type='bouncy-slide-in'] .new-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards;
  animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards;
}

.effeckt-list[data-effeckt-type='bouncy-slide-in'] .remove-item {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms;
  animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms;
}

@-webkit-keyframes bouncySlideIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }

  70% {
    opacity: 1;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bouncySlideIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px);
    -ms-transform: translateX(300px);
    transform: translateX(300px);
  }

  70% {
    opacity: 1;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes fallOffY {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0) rotateZ(0deg);
    transform: translateX(0) translateY(0) rotateZ(0deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0) rotateZ(0deg);
    transform: translateX(-50%) translateY(0) rotateZ(0deg);
  }

  75% {
    opacity: 0.75;
    -webkit-transform: translateX(-50%) translateY(0) rotateZ(-30deg);
    transform: translateX(-50%) translateY(0) rotateZ(-30deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(300px) rotateZ(-60deg);
    transform: translateX(-50%) translateY(300px) rotateZ(-60deg);
  }
}

@keyframes fallOffY {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0) rotateZ(0deg);
    -ms-transform: translateX(0) translateY(0) rotateZ(0deg);
    transform: translateX(0) translateY(0) rotateZ(0deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0) rotateZ(0deg);
    -ms-transform: translateX(-50%) translateY(0) rotateZ(0deg);
    transform: translateX(-50%) translateY(0) rotateZ(0deg);
  }

  75% {
    opacity: 0.75;
    -webkit-transform: translateX(-50%) translateY(0) rotateZ(-30deg);
    -ms-transform: translateX(-50%) translateY(0) rotateZ(-30deg);
    transform: translateX(-50%) translateY(0) rotateZ(-30deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(300px) rotateZ(-60deg);
    -ms-transform: translateX(-50%) translateY(300px) rotateZ(-60deg);
    transform: translateX(-50%) translateY(300px) rotateZ(-60deg);
  }
}