buttons/_demo/assets/css/effeckt.autoprefixed.css

How many ways are there to build a button with Assemble? Many.

.effeckt-button {
  position: relative;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
}

.effeckt-button[data-loading] {
  cursor: default;
}

.effeckt-button .spinner {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 50%;
  margin-top: -16px;
  opacity: 0;
  background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2MkI2RUQwRTdGOUUxMUUyQTFBODhFMEFDQUU0RUM3OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2MkI2RUQwRjdGOUUxMUUyQTFBODhFMEFDQUU0RUM3OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjYyQjZFRDBDN0Y5RTExRTJBMUE4OEUwQUNBRTRFQzc5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjYyQjZFRDBEN0Y5RTExRTJBMUE4OEUwQUNBRTRFQzc5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+OoD8dAAAEMNJREFUeNqsXFvM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 );
  background-size: 32px auto;
}

.effeckt-button[data-loading] .spinner {
  -webkit-animation: spinner 1s infinite linear;
  -o-animation: spinner 1s infinite linear;
  animation: spinner 1s infinite linear;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.effeckt-button,
.effeckt-button .spinner,
.effeckt-button .label {
  -webkit-transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  -o-transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}

.effeckt-button.zoom-in,
.effeckt-button.zoom-in .spinner,
.effeckt-button.zoom-in .label,
.effeckt-button.zoom-out,
.effeckt-button.zoom-out .spinner,
.effeckt-button.zoom-out .label {
  -webkit-transition: 500ms ease all;
  -o-transition: 500ms ease all;
  transition: 500ms ease all;
}

.effeckt-button.expand-right .spinner {
  right: 16px;
}

.effeckt-button.expand-right[data-loading] {
  padding-right: 64px;
}

.effeckt-button.expand-right[data-loading] .spinner {
  opacity: 1;
}

.effeckt-button.expand-left .spinner {
  left: 16px;
}

.effeckt-button.expand-left[data-loading] {
  padding-left: 64px;
}

.effeckt-button.expand-left[data-loading] .spinner {
  opacity: 1;
}

.effeckt-button.expand-up {
  overflow: hidden;
}

.effeckt-button.expand-up .spinner {
  top: 32px;
  left: 50%;
  margin-left: -16px;
}

.effeckt-button.expand-up[data-loading] {
  padding-top: 64px;
}

.effeckt-button.expand-up[data-loading] .spinner {
  opacity: 1;
  top: 16px;
  margin-top: 0;
}

.effeckt-button.expand-down {
  overflow: hidden;
}

.effeckt-button.expand-down .spinner {
  left: 50%;
  top: 100%;
  margin-left: -16px;
  margin-top: -48px;
}

.effeckt-button.expand-down[data-loading] {
  padding-bottom: 64px;
}

.effeckt-button.expand-down[data-loading] .spinner {
  opacity: 1;
}

.effeckt-button.slide-left {
  overflow: hidden;
}

.effeckt-button.slide-left .label {
  position: relative;
}

.effeckt-button.slide-left .spinner {
  left: 100%;
  margin-left: -16px;
}

.effeckt-button.slide-left[data-loading] .label {
  opacity: 0;
  left: -100%;
}

.effeckt-button.slide-left[data-loading] .spinner {
  opacity: 1;
  left: 50%;
}

.effeckt-button.slide-right {
  overflow: hidden;
}

.effeckt-button.slide-right .label {
  position: relative;
}

.effeckt-button.slide-right .spinner {
  right: 100%;
  margin-left: -16px;
}

.effeckt-button.slide-right[data-loading] .label {
  opacity: 0;
  left: 100%;
}

.effeckt-button.slide-right[data-loading] .spinner {
  opacity: 1;
  left: 50%;
}

.effeckt-button.slide-up {
  overflow: hidden;
}

.effeckt-button.slide-up .label {
  position: relative;
}

.effeckt-button.slide-up .spinner {
  left: 50%;
  margin-left: -16px;
  margin-top: 1em;
}

.effeckt-button.slide-up[data-loading] .label {
  opacity: 0;
  top: -1em;
}

.effeckt-button.slide-up[data-loading] .spinner {
  opacity: 1;
  margin-top: -16px;
}

.effeckt-button.slide-down {
  overflow: hidden;
}

.effeckt-button.slide-down .label {
  position: relative;
}

.effeckt-button.slide-down .spinner {
  left: 50%;
  margin-left: -16px;
  margin-top: -32px;
}

.effeckt-button.slide-down[data-loading] .label {
  opacity: 0;
  top: 1em;
}

.effeckt-button.slide-down[data-loading] .spinner {
  opacity: 1;
  margin-top: -16px;
}

.effeckt-button.zoom-out {
  overflow: hidden;
}

.effeckt-button.zoom-out .spinner {
  left: 50%;
  margin-left: -16px;
  -webkit-transform: scale(2.5);
  -ms-transform: scale(2.5);
  -o-transform: scale(2.5);
  transform: scale(2.5);
}

.effeckt-button.zoom-out .label {
  position: relative;
  display: inline-block;
}

.effeckt-button.zoom-out[data-loading] .label {
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}

.effeckt-button.zoom-out[data-loading] .spinner {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}

.effeckt-button.zoom-in {
  overflow: hidden;
}

.effeckt-button.zoom-in .spinner {
  left: 50%;
  margin-left: -16px;
  -webkit-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
}

.effeckt-button.zoom-in .label {
  position: relative;
  display: inline-block;
}

.effeckt-button.zoom-in[data-loading] .label {
  opacity: 0;
  -webkit-transform: scale(2.2);
  -ms-transform: scale(2.2);
  -o-transform: scale(2.2);
  transform: scale(2.2);
}

.effeckt-button.zoom-in[data-loading] .spinner {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}

.effeckt-caption {
  position: relative;
  float: left;
  overflow: hidden;
}

.effeckt-caption:nth-child(2n) {
  margin-right: 0;
}

.effeckt-caption img {
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.effeckt-caption figcaption {
  position: absolute;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  width: 100%;
}

.effeckt-caption-1 figcaption {
  bottom: 0;
  left: 0;
  opacity: 0;
}

.effeckt-caption-1:hover figcaption,
.effeckt-caption-1:active figcaption {
  opacity: 1;
}

.effeckt-caption-2 figcaption {
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}

.effeckt-caption-2:hover figcaption,
.effeckt-caption-2:active figcaption {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.effeckt-caption-3 figcaption {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  z-index: 0;
}

.effeckt-caption-3 img {
  position: relative;
  z-index: 1;
  -webkit-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.effeckt-caption-3 .effeckt-figcaption-wrap {
  position: absolute;
  bottom: 1rem;
  opacity: 0;
  -webkit-transition: opacity 0.25s linear 0s;
  -o-transition: opacity 0.25s linear 0s;
  transition: opacity 0.25s linear 0s;
}

.effeckt-caption-3:hover .effeckt-figcaption-wrap,
.effeckt-caption-3:active .effeckt-figcaption-wrap {
  opacity: 1;
  -webkit-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.effeckt-caption-3:hover img,
.effeckt-caption-3:active img {
  -webkit-transform: scale(0.5) translateY(-80px);
  -ms-transform: scale(0.5) translateY(-80px);
  -o-transform: scale(0.5) translateY(-80px);
  transform: scale(0.5) translateY(-80px);
  -webkit-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0;
}

.effeckt-caption-4 figcaption {
  left: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.effeckt-caption-4:hover figcaption,
.effeckt-caption-4:active figcaption {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-caption-5 figcaption {
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
}

.effeckt-caption-5:hover figcaption,
.effeckt-caption-5:active figcaption {
  opacity: 1;
}

.effeckt-caption-6 figcaption {
  top: 0;
  left: 0;
  -webkit-transform: translateX(100%) rotate(20deg);
  -ms-transform: translateX(100%) rotate(20deg);
  -o-transform: translateX(100%) rotate(20deg);
  transform: translateX(100%) rotate(20deg);
  opacity: 0;
}

.effeckt-caption-6:hover figcaption,
.effeckt-caption-6:active figcaption {
  -webkit-transform: translateX(0) rotate(0deg);
  -ms-transform: translateX(0) rotate(0deg);
  -o-transform: translateX(0) rotate(0deg);
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

.effeckt-caption-7 figcaption {
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
  z-index: 2;
}

.effeckt-caption-7 .effeckt-figcaption-wrap {
  -webkit-transition: 500ms 250ms;
  -o-transition: 500ms 250ms;
  transition: 500ms 250ms;
  -webkit-transform: translateX(200%);
  -ms-transform: translateX(200%);
  -o-transform: translateX(200%);
  transform: translateX(200%);
}

.effeckt-caption-7:hover figcaption,
.effeckt-caption-7:active figcaption {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.effeckt-caption-7:hover .effeckt-figcaption-wrap,
.effeckt-caption-7:active .effeckt-figcaption-wrap {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-caption-8 figcaption {
  top: 0;
  left: 0;
  height: 100%;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}

.effeckt-caption-8 img {
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.effeckt-caption-8:hover figcaption,
.effeckt-caption-8:active figcaption {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.effeckt-caption-8:hover img,
.effeckt-caption-8:active img {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.effeckt-caption-9 figcaption {
  top: 0;
  left: 0;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
  text-align: center;
  opacity: 0;
}

.effeckt-caption-9 img {
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.effeckt-caption-9:hover figcaption,
.effeckt-caption-9:active figcaption {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.effeckt-caption-9:hover img,
.effeckt-caption-9:active img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.effeckt-caption-10 {
  overflow: visible;
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
}

.effeckt-caption-10 figcaption {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.effeckt-caption-10 img {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.effeckt-caption-10:hover figcaption,
.effeckt-caption-10:active figcaption {
  -webkit-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

.effeckt-caption-10:hover img,
.effeckt-caption-10:active img {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.effeckt-list[data-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);
  -o-transform: translateX(-300px);
  transform: translateX(-300px);
  -webkit-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards;
  -o-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards;
  animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards;
}

.effeckt-list[data-type='pop-in'] .remove-item {
  max-height: 50px;
  opacity: 1;
  -webkit-animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms;
  -o-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: 100px;
  }
}

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

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

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

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

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

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

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

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

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

  from {
    max-height: 50px;
  }
}

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

  from {
    max-height: 50px;
  }
}

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

  from {
    max-height: 50px;
  }
}

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

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

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

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

@keyframes growHeight {
  to {
    max-height: 100px;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-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);
  }
}

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

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

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

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

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

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

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

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

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

  100% {
    -o-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);
    -o-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);
    -o-transform: perspective(250px) rotateX(-10deg);
    transform: perspective(250px) rotateX(-10deg);
  }

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

  100% {
    -webkit-transform: perspective(250px) rotateX(0deg);
    -ms-transform: perspective(250px) rotateX(0deg);
    -o-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;
  }
}

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

  100% {
    -o-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);
    -o-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);
    -o-transform: perspective(250px) rotateX(90deg);
    transform: perspective(250px) rotateX(90deg);
    opacity: 0;
  }
}

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

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

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

  100% {
    -o-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);
    -o-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);
    -o-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;
  }
}

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

  100% {
    -o-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);
    -o-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);
    -o-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.effeckt-list-scroll {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px;
}

.effeckt-list-scroll > li {
  position: relative;
  z-index: 2;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

[data-effeckt="grow"] li {
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

[data-effeckt="grow"] li.past,
[data-effeckt="grow"] li.future {
  -webkit-transform: scale(0.01);
  -ms-transform: scale(0.01);
  -o-transform: scale(0.01);
  transform: scale(0.01);
}

[data-effeckt="curl"] li {
  -webkit-perspective: 600px;
  -ms-perspective: 600px;
  -o-perspective: 600px;
  perspective: 600px;
  -webkit-perspective-origin: 0% 50%;
  -ms-perspective-origin: 0% 50%;
  -o-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
  -webkit-transition: all 500ms ease, opacity 166.66667ms ease;
  -o-transition: all 500ms ease, opacity 166.66667ms ease;
  transition: all 500ms ease, opacity 166.66667ms ease;
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

[data-effeckt="curl"] li.past {
  opacity: 0;
  -webkit-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

[data-effeckt="curl"] li.future {
  opacity: 0;
  -webkit-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

[data-effeckt="wave"] li {
  -webkit-transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -o-transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
}

[data-effeckt="wave"] li.past {
  -webkit-transform: translateX(-70%);
  -ms-transform: translateX(-70%);
  -o-transform: translateX(-70%);
  transform: translateX(-70%);
}

[data-effeckt="wave"] li.future {
  -webkit-transform: translateX(-70%);
  -ms-transform: translateX(-70%);
  -o-transform: translateX(-70%);
  transform: translateX(-70%);
}

[data-effeckt="fan"] li {
  -webkit-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

[data-effeckt="fan"] li.past {
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

[data-effeckt="fan"] li.future {
  -webkit-transform: rotate(70deg);
  -ms-transform: rotate(70deg);
  -o-transform: rotate(70deg);
  transform: rotate(70deg);
}

[data-effeckt="fade"] li {
  -webkit-transition: opacity 250ms ease-in-out;
  -o-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

[data-effeckt="fade"] li.past,
[data-effeckt="fade"] li.future {
  opacity: 0;
}

[data-effeckt="fly"] {
  -webkit-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px;
  -webkit-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

[data-effeckt="fly"] li {
  -webkit-transition: all 500ms ease, opacity 250ms ease;
  -o-transition: all 500ms ease, opacity 250ms ease;
  transition: all 500ms ease, opacity 250ms ease;
  -webkit-transform-origin: 50% 50% -50px;
  -ms-transform-origin: 50% 50% -50px;
  -o-transform-origin: 50% 50% -50px;
  transform-origin: 50% 50% -50px;
}

[data-effeckt="fly"] li.past,
[data-effeckt="fly"] li.future {
  opacity: 0;
}

[data-effeckt="fly"] li.past {
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

[data-effeckt="fly"] li.future {
  -webkit-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -o-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}

.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden;
}

.md-perspective body {
  -webkit-perspective: 600px;
  -ms-perspective: 600px;
  -o-perspective: 600px;
  perspective: 600px;
}

.effeckt-modal-wrap {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 320px;
  min-width: 630px;
  z-index: 2000;
  display: none;
}

.effeckt-modal {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.effeckt-show .effeckt-modal {
  visibility: visible;
}

.effeckt-overlay.effeckt-show {
  opacity: 1;
  visibility: visible;
}

.effeckt-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

/*
  Individual modal styles with animations/transitions
*/

/* Effect 1: From Above */

.md-effect-1 .effeckt-modal {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.effeckt-show.md-effect-1 .effeckt-modal {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/* Effect 5: From below*/

.md-effect-5 .effeckt-modal {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.effeckt-show.md-effect-5 .effeckt-modal {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/* Effect 2: Slide from the right */

.md-effect-2 .effeckt-modal {
  -webkit-transform: translateX(30%);
  -ms-transform: translateX(30%);
  -o-transform: translateX(30%);
  transform: translateX(30%);
  opacity: 0;
  -webkit-transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -o-transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.effeckt-show.md-effect-2 .effeckt-modal {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

/* Effect 3: Slide from the bottom */

.md-effect-3 .effeckt-modal {
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  -o-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 0;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.effeckt-show.md-effect-3 .effeckt-modal {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

/* Effect 4: Newspaper */

.md-effect-4 .effeckt-modal {
  -webkit-transform: scale(0.5) rotate(720deg);
  -ms-transform: scale(0.5) rotate(720deg);
  -o-transform: scale(0.5) rotate(720deg);
  transform: scale(0.5) rotate(720deg);
  opacity: 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.effeckt-show.md-effect-4 .effeckt-modal {
  -webkit-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* Effect 6: side fall */

.md-effect-6.effeckt-modal-wrap {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-6 .effeckt-modal {
  -webkit-transform: translateZ(600px) translateX(30%) rotate(10deg);
  -ms-transform: translateZ(600px) translateX(30%) rotate(10deg);
  -o-transform: translateZ(600px) translateX(30%) rotate(10deg);
  transform: translateZ(600px) translateX(30%) rotate(10deg);
  opacity: 0;
}

.effeckt-show.md-effect-6 .effeckt-modal {
  -webkit-transition: 500ms ease-in;
  -o-transition: 500ms ease-in;
  transition: 500ms ease-in;
  -webkit-transform: translateZ(0) translateX(0) rotate(0deg);
  -ms-transform: translateZ(0) translateX(0) rotate(0deg);
  -o-transform: translateZ(0) translateX(0) rotate(0deg);
  transform: translateZ(0) translateX(0) rotate(0deg);
  opacity: 1;
}

.effeckt-hide.md-effect-6 .effeckt-modal {
  -webkit-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  opacity: 0;
}

/* Effect 7:  slide and stick to top */

.md-effect-7 {
  top: 0;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

.md-effect-7 .effeckt-modal {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  opacity: 0;
}

.effeckt-show.md-effect-7 .effeckt-modal {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

/* Effect 8: 3D flip horizontal */

.md-effect-8 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-8 .effeckt-modal {
  -webkit-transform: rotateY(-70deg);
  -ms-transform: rotateY(-70deg);
  -o-transform: rotateY(-70deg);
  transform: rotateY(-70deg);
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}

.effeckt-show.md-effect-8 .effeckt-modal {
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  opacity: 1;
}

/* Effect 9: 3D flip vertical */

.md-effect-9 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-9 .effeckt-modal {
  -webkit-transform: rotateX(-70deg);
  -ms-transform: rotateX(-70deg);
  -o-transform: rotateX(-70deg);
  transform: rotateX(-70deg);
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  opacity: 0;
}

.effeckt-show.md-effect-9 .effeckt-modal {
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
}

/* Effect 10: 3D sign */

.md-effect-10 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-10 .effeckt-modal {
  -webkit-transform: rotateX(-60deg);
  -ms-transform: rotateX(-60deg);
  -o-transform: rotateX(-60deg);
  transform: rotateX(-60deg);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  opacity: 0;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.effeckt-show.md-effect-10 .effeckt-modal {
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
}

/* Effect 12:  Just me */

.md-effect-12 .effeckt-modal {
  opacity: 0;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.effeckt-show.md-effect-12 .effeckt-modal {
  opacity: 1;
  background: #555;
}

.effeckt-show.md-effect-12 ~ .effeckt-overlay {
  background: #555;
}

.md-effect-12,
.md-effect-12 h3 {
  background: transparent;
}

/* Effect 13: 3D slit */

.md-effect-13 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-13 .effeckt-modal {
  -webkit-transform: translateZ(-3000px) rotateY(90deg);
  -ms-transform: translateZ(-3000px) rotateY(90deg);
  -o-transform: translateZ(-3000px) rotateY(90deg);
  transform: translateZ(-3000px) rotateY(90deg);
  opacity: 0;
}

.effeckt-show.md-effect-13 .effeckt-modal {
  -webkit-animation: slit 0.7s forwards ease-out;
  -o-animation: slit 0.7s forwards ease-out;
  animation: slit 0.7s forwards ease-out;
}

.effeckt-hide.md-effect-13 .effeckt-modal {
  opacity: 0;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}

@-webkit-keyframes slit {
  50% {
    -webkit-transform: translateZ(-250px) rotateY(89deg);
    transform: translateZ(-250px) rotateY(89deg);
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: translateZ(0) rotateY(0deg);
    transform: translateZ(0) rotateY(0deg);
    opacity: 1;
  }
}

@-o-keyframes slit {
  50% {
    -o-transform: translateZ(-250px) rotateY(89deg);
    transform: translateZ(-250px) rotateY(89deg);
    opacity: 1;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -o-transform: translateZ(0) rotateY(0deg);
    transform: translateZ(0) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes slit {
  50% {
    -webkit-transform: translateZ(-250px) rotateY(89deg);
    -ms-transform: translateZ(-250px) rotateY(89deg);
    -o-transform: translateZ(-250px) rotateY(89deg);
    transform: translateZ(-250px) rotateY(89deg);
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: translateZ(0) rotateY(0deg);
    -ms-transform: translateZ(0) rotateY(0deg);
    -o-transform: translateZ(0) rotateY(0deg);
    transform: translateZ(0) rotateY(0deg);
    opacity: 1;
  }
}

/* Effect 14:  3D Rotate from bottom */

.md-effect-14 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-14 .effeckt-modal {
  -webkit-transform: translateY(100%) rotateX(90deg);
  -ms-transform: translateY(100%) rotateX(90deg);
  -o-transform: translateY(100%) rotateX(90deg);
  transform: translateY(100%) rotateX(90deg);
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  opacity: 0;
  -webkit-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}

.effeckt-show.md-effect-14 .effeckt-modal {
  -webkit-transform: translateY(0%) rotateX(0deg);
  -ms-transform: translateY(0%) rotateX(0deg);
  -o-transform: translateY(0%) rotateX(0deg);
  transform: translateY(0%) rotateX(0deg);
  opacity: 1;
}

/* Effect 15:  3D Rotate in from left */

.md-effect-15 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-15 .effeckt-modal {
  -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  -o-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  opacity: 0;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}

.effeckt-show.md-effect-15 .effeckt-modal {
  -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
  -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
  -o-transform: translateZ(0px) translateX(0%) rotateY(0deg);
  transform: translateZ(0px) translateX(0%) rotateY(0deg);
  opacity: 1;
}

/* Effect 16:  Blur */

.effeckt-show.md-effect-16 ~ .md-overlay {
  background: rgba(180, 46, 32, 0.5);
}

.effeckt-show.md-effect-16 ~ .page-wrap {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

.md-effect-16 .effeckt-modal {
  opacity: 0;
}

.effeckt-show.md-effect-16 ~ .page-wrap,
.md-effect-16 .effeckt-modal {
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}

.effeckt-show.md-effect-16 .effeckt-modal {
  opacity: 1;
}

/* Effect 17:  Slide in from bottom with perspective on container */

.effeckt-show.md-effect-17 ~ .page-wrap {
  height: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 500ms;
  -o-transition: -o-transform 500ms;
  transition: -ms-transform 500ms;
  transition: transform 500ms;
}

.effeckt-show.md-effect-17 ~ .page-wrap,
.effeckt-show.md-effect-17 ~ .effeckt-overlay {
  -webkit-transform: rotateX(-2deg);
  -ms-transform: rotateX(-2deg);
  -o-transform: rotateX(-2deg);
  transform: rotateX(-2deg);
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.md-effect-17 .effeckt-modal {
  opacity: 0;
  -webkit-transform: translateY(200%);
  -ms-transform: translateY(200%);
  -o-transform: translateY(200%);
  transform: translateY(200%);
}

.effeckt-show.md-effect-17 .effeckt-modal {
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
  -webkit-transition: all 500ms 0.2s;
  -o-transition: all 500ms 0.2s;
  transition: all 500ms 0.2s;
}

.effeckt-hide.md-effect-17 .effeckt-modal {
  opacity: 0;
  -web