@thejaredwilcurt/csslop 0.0.8 → 0.0.9

package/site/real/tuesday-v1.3.0.css

@@ -0,0 +1,1115 @@
+/* Tuesday - v1.3.0 - MIT */
+/* 
+ * tuesday.less v1.3.0 - 2020-06-04 
+ * A quirky CSS Animation Library by Shakr. 
+ * https://shakrmedia.github.io/tuesday 
+ * 
+ * Copyright 2020 Shakr Media Co., Ltd.; MIT License 
+ */
+.animated {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+@-webkit-keyframes tdFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes tdFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes tdFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes tdFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.tdFadeIn {
+  -webkit-animation-name: tdFadeIn;
+          animation-name: tdFadeIn;
+}
+.tdFadeOut {
+  -webkit-animation-name: tdFadeOut;
+          animation-name: tdFadeOut;
+}
+@-webkit-keyframes tdFadeInDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes tdFadeInDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes tdFadeInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(10px);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes tdFadeInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(10px);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@-webkit-keyframes tdFadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes tdFadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes tdFadeInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes tdFadeInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@-webkit-keyframes tdFadeOutUp {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+@keyframes tdFadeOutUp {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+@-webkit-keyframes tdFadeOutRight {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+}
+@keyframes tdFadeOutRight {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+}
+@-webkit-keyframes tdFadeOutDown {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+@keyframes tdFadeOutDown {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+@-webkit-keyframes tdFadeOutLeft {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+@keyframes tdFadeOutLeft {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+.tdFadeInDown {
+  -webkit-animation-name: tdFadeInDown;
+          animation-name: tdFadeInDown;
+}
+.tdFadeInLeft {
+  -webkit-animation-name: tdFadeInLeft;
+          animation-name: tdFadeInLeft;
+}
+.tdFadeInUp {
+  -webkit-animation-name: tdFadeInUp;
+          animation-name: tdFadeInUp;
+}
+.tdFadeInRight {
+  -webkit-animation-name: tdFadeInRight;
+          animation-name: tdFadeInRight;
+}
+.tdFadeOutUp {
+  -webkit-animation-name: tdFadeOutUp;
+          animation-name: tdFadeOutUp;
+}
+.tdFadeOutRight {
+  -webkit-animation-name: tdFadeOutRight;
+          animation-name: tdFadeOutRight;
+}
+.tdFadeOutDown {
+  -webkit-animation-name: tdFadeOutDown;
+          animation-name: tdFadeOutDown;
+}
+.tdFadeOutLeft {
+  -webkit-animation-name: tdFadeOutLeft;
+          animation-name: tdFadeOutLeft;
+}
+@-webkit-keyframes tdExpandIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.85);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes tdExpandIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.85);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes tdExpandInBounce {
+  0% {
+    opacity: 0;
+    transform: scale(0.85);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  70% {
+    transform: scale(1.03);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+@keyframes tdExpandInBounce {
+  0% {
+    opacity: 0;
+    transform: scale(0.85);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  70% {
+    transform: scale(1.03);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+@-webkit-keyframes tdExpandOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+}
+@keyframes tdExpandOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+}
+@-webkit-keyframes tdExpandOutBounce {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(0.95);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+}
+@keyframes tdExpandOutBounce {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(0.95);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+}
+@-webkit-keyframes tdShrinkIn {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes tdShrinkIn {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes tdShrinkInBounce {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  70% {
+    transform: scale(0.95);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes tdShrinkInBounce {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  70% {
+    transform: scale(0.95);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes tdShrinkOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.85);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+@keyframes tdShrinkOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.85);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+@-webkit-keyframes tdShrinkOutBounce {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(1.03);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.85);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+@keyframes tdShrinkOutBounce {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(1.03);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.85);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+.tdExpandIn {
+  -webkit-animation-name: tdExpandIn;
+          animation-name: tdExpandIn;
+}
+.tdExpandInBounce {
+  -webkit-animation-name: tdExpandInBounce;
+          animation-name: tdExpandInBounce;
+}
+.tdExpandOut {
+  -webkit-animation-name: tdExpandOut;
+          animation-name: tdExpandOut;
+}
+.tdExpandOutBounce {
+  -webkit-animation-name: tdExpandOutBounce;
+          animation-name: tdExpandOutBounce;
+}
+.tdShrinkIn {
+  -webkit-animation-name: tdShrinkIn;
+          animation-name: tdShrinkIn;
+}
+.tdShrinkInBounce {
+  -webkit-animation-name: tdShrinkInBounce;
+          animation-name: tdShrinkInBounce;
+}
+.tdShrinkOut {
+  -webkit-animation-name: tdShrinkOut;
+          animation-name: tdShrinkOut;
+}
+.tdShrinkOutBounce {
+  -webkit-animation-name: tdShrinkOutBounce;
+          animation-name: tdShrinkOutBounce;
+}
+@-webkit-keyframes tdStampIn {
+  0% {
+    opacity: 0;
+    transform: scale(1.3);
+    -webkit-animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+            animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  90% {
+    opacity: 1;
+    transform: scale(1.03);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes tdStampIn {
+  0% {
+    opacity: 0;
+    transform: scale(1.3);
+    -webkit-animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+            animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  90% {
+    opacity: 1;
+    transform: scale(1.03);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes tdStampInSwing {
+  0% {
+    opacity: 0;
+    transform: scale(1.3) rotate(-10deg);
+    -webkit-animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+            animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  90% {
+    opacity: 1;
+    transform: scale(1.03);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0);
+  }
+}
+@keyframes tdStampInSwing {
+  0% {
+    opacity: 0;
+    transform: scale(1.3) rotate(-10deg);
+    -webkit-animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+            animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  90% {
+    opacity: 1;
+    transform: scale(1.03);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0);
+  }
+}
+.tdStampIn {
+  -webkit-animation-name: tdStampIn;
+          animation-name: tdStampIn;
+}
+.tdStampInSwing {
+  -webkit-animation-name: tdStampInSwing;
+          animation-name: tdStampInSwing;
+}
+@-webkit-keyframes tdSwingIn {
+  0% {
+    opacity: 0;
+    transform: rotate(-10deg) scale(0.85);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  70% {
+    opacity: 1;
+    transform: rotate(1deg);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+@keyframes tdSwingIn {
+  0% {
+    opacity: 0;
+    transform: rotate(-10deg) scale(0.85);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  70% {
+    opacity: 1;
+    transform: rotate(1deg);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+@-webkit-keyframes tdSwingOut {
+  0% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  30% {
+    opacity: 1;
+    transform: rotate(-1deg);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(10deg) scale(0.85);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+@keyframes tdSwingOut {
+  0% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  30% {
+    opacity: 1;
+    transform: rotate(-1deg);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(10deg) scale(0.85);
+    -webkit-animation-timing-function: ease;
+            animation-timing-function: ease;
+  }
+}
+.tdSwingIn {
+  -webkit-animation-name: tdSwingIn;
+          animation-name: tdSwingIn;
+}
+.tdSwingOut {
+  -webkit-animation-name: tdSwingOut;
+          animation-name: tdSwingOut;
+}
+@-webkit-keyframes tdHingeFlipIn {
+  0% {
+    opacity: 0;
+    transform: perspective(600px) rotateX(0deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  50% {
+    transform: perspective(600px) rotateX(-10deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  100% {
+    opacity: 1;
+    transform: perspective(600px) rotateX(0deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+}
+@keyframes tdHingeFlipIn {
+  0% {
+    opacity: 0;
+    transform: perspective(600px) rotateX(0deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  50% {
+    transform: perspective(600px) rotateX(-10deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  100% {
+    opacity: 1;
+    transform: perspective(600px) rotateX(0deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+}
+@-webkit-keyframes tdHingeFlipOut {
+  0% {
+    opacity: 1;
+    transform: perspective(600px) rotateX(0deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  50% {
+    transform: perspective(600px) rotateX(-10deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  100% {
+    opacity: 0;
+    transform: perspective(600px) rotateX(0deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+}
+@keyframes tdHingeFlipOut {
+  0% {
+    opacity: 1;
+    transform: perspective(600px) rotateX(0deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+  50% {
+    transform: perspective(600px) rotateX(-10deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  100% {
+    opacity: 0;
+    transform: perspective(600px) rotateX(0deg);
+    transform-origin: center top;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+}
+.tdHingeFlipIn {
+  -webkit-animation-name: tdHingeFlipIn;
+          animation-name: tdHingeFlipIn;
+}
+.tdHingeFlipOut {
+  -webkit-animation-name: tdHingeFlipOut;
+          animation-name: tdHingeFlipOut;
+}
+@-webkit-keyframes tdDropInLeft {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: rotate(2deg) translateY(-15px);
+    transform-origin: right bottom;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  50% {
+    opacity: 1;
+    transform: rotate(0) translateY(0px);
+    transform-origin: right bottom;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  75% {
+    transform: rotate(-0.5deg) translateY(0px);
+    transform-origin: left bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+            animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0) translateY(0px);
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+}
+@keyframes tdDropInLeft {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: rotate(2deg) translateY(-15px);
+    transform-origin: right bottom;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  50% {
+    opacity: 1;
+    transform: rotate(0) translateY(0px);
+    transform-origin: right bottom;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  75% {
+    transform: rotate(-0.5deg) translateY(0px);
+    transform-origin: left bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+            animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0) translateY(0px);
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+}
+@-webkit-keyframes tdDropInRight {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: rotate(-2deg) translateY(-15px);
+    transform-origin: left bottom;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  50% {
+    opacity: 1;
+    transform: rotate(0) translateY(0px);
+    transform-origin: left bottom;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  75% {
+    transform: rotate(0.5deg) translateY(0px);
+    transform-origin: right bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+            animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0) translateY(0px);
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+}
+@keyframes tdDropInRight {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: rotate(-2deg) translateY(-15px);
+    transform-origin: left bottom;
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  50% {
+    opacity: 1;
+    transform: rotate(0) translateY(0px);
+    transform-origin: left bottom;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  75% {
+    transform: rotate(0.5deg) translateY(0px);
+    transform-origin: right bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+            animation-timing-function: cubic-bezier(0.59, 0, 1, 0.375);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0) translateY(0px);
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+            animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
+  }
+}
+.tdDropInLeft {
+  -webkit-animation-name: tdDropInLeft;
+          animation-name: tdDropInLeft;
+}
+.tdDropInRight {
+  -webkit-animation-name: tdDropInRight;
+          animation-name: tdDropInRight;
+}
+@-webkit-keyframes tdPlopIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.9, 0.9);
+  }
+  10% {
+    opacity: 1;
+    transform: scale(0.7, 1.3);
+  }
+  70% {
+    transform: scale(1.1, 0.95);
+  }
+  90% {
+    transform: scale(0.97, 1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes tdPlopIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.9, 0.9);
+  }
+  10% {
+    opacity: 1;
+    transform: scale(0.7, 1.3);
+  }
+  70% {
+    transform: scale(1.1, 0.95);
+  }
+  90% {
+    transform: scale(0.97, 1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes tdPlopInDown {
+  0% {
+    opacity: 0;
+    transform: scale(0.9, 0.8);
+    transform-origin: center top;
+  }
+  10% {
+    opacity: 1;
+    transform: scale(0.8, 1.3);
+    transform-origin: center top;
+  }
+  70% {
+    transform: scale(1, 0.95);
+    transform-origin: center top;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: center top;
+  }
+}
+@keyframes tdPlopInDown {
+  0% {
+    opacity: 0;
+    transform: scale(0.9, 0.8);
+    transform-origin: center top;
+  }
+  10% {
+    opacity: 1;
+    transform: scale(0.8, 1.3);
+    transform-origin: center top;
+  }
+  70% {
+    transform: scale(1, 0.95);
+    transform-origin: center top;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: center top;
+  }
+}
+@-webkit-keyframes tdPlopInUp {
+  0% {
+    opacity: 0;
+    transform: scale(0.9, 0.8);
+    transform-origin: center bottom;
+  }
+  10% {
+    opacity: 1;
+    transform: scale(0.8, 1.3);
+    transform-origin: center bottom;
+  }
+  70% {
+    transform: scale(1, 0.95);
+    transform-origin: center bottom;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: center bottom;
+  }
+}
+@keyframes tdPlopInUp {
+  0% {
+    opacity: 0;
+    transform: scale(0.9, 0.8);
+    transform-origin: center bottom;
+  }
+  10% {
+    opacity: 1;
+    transform: scale(0.8, 1.3);
+    transform-origin: center bottom;
+  }
+  70% {
+    transform: scale(1, 0.95);
+    transform-origin: center bottom;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: center bottom;
+  }
+}
+.tdPlopIn {
+  -webkit-animation-name: tdPlopIn;
+          animation-name: tdPlopIn;
+}
+.tdPlopInDown {
+  -webkit-animation-name: tdPlopInDown;
+          animation-name: tdPlopInDown;
+}
+.tdPlopInUp {
+  -webkit-animation-name: tdPlopInUp;
+          animation-name: tdPlopInUp;
+}
+