:root {
  --zeal-color: #ff4500;
}
html {
  scroll-behavior: smooth;
}
.bg-red {
  background-color: red;
}
.bg-blue {
  background-color: #00f;
}
.bg-green {
  background-color: green;
}
.bg-black {
  background-color: #000;
}
.bg-white {
  background-color: #fff;
}
.z-red {
  color: red;
}
.z-blue {
  color: #00f;
}
.z-green {
  color: green;
}
.z-white {
  color: #fff;
}
.z-black {
  color: #000;
}
.z-gd1-v {
  background: -webkit-linear-gradient(45deg, #3cf, #f9c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd1-h {
  background: -webkit-linear-gradient(90deg, #3cf, #f9c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd1-v {
  background: linear-gradient(to right, #3cf 0, #f9c 100%);
}
.z-bg-gd1-h {
  background: linear-gradient(to bottom, #3cf 0, #f9c 100%);
}
.z-gd2-v {
  background: -webkit-linear-gradient(45deg, #2196f3, #f44336);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd2-h {
  background: -webkit-linear-gradient(90deg, #2196f3, #f44336);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd2-v {
  background: linear-gradient(to right, #2196f3 0, #f44336 100%);
}
.z-bg-gd2-h {
  background: linear-gradient(to bottom, #2196f3 0, #f44336 100%);
}
.z-gd3-v {
  background: -webkit-linear-gradient(45deg, #ff5f6d, #ffc371);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd3-h {
  background: -webkit-linear-gradient(90deg, #ff5f6d, #ffc371);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd3-v {
  background: linear-gradient(to right, #ff5f6d 0, #ffc371 100%);
}
.z-bg-gd3-h {
  background: linear-gradient(to bottom, #ff5f6d 0, #ffc371 100%);
}
.z-gd4-v {
  background: -webkit-linear-gradient(45deg, #16bffd, #cb3066);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd4-h {
  background: -webkit-linear-gradient(90deg, #16bffd, #cb3066);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd4-v {
  background: linear-gradient(to right, #16bffd 0, #cb3066 100%);
}
.z-bg-gd4-h {
  background: linear-gradient(to bottom, #16bffd 0, #cb3066 100%);
}
.z-gd5-v {
  background: -webkit-linear-gradient(45deg, #eecda3, #ef629f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd5-h {
  background: -webkit-linear-gradient(90deg, #eecda3, #ef629f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd5-v {
  background: linear-gradient(to right, #eecda3 0, #ef629f 100%);
}
.z-bg-gd5-h {
  background: linear-gradient(to bottom, #eecda3 0, #ef629f 100%);
}
.z-gd6-v {
  background: -webkit-linear-gradient(45deg, #a80077, #6f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd6-h {
  background: -webkit-linear-gradient(90deg, #a80077, #6f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd6-v {
  background: linear-gradient(to right, #a80077 0, #6f0 100%);
}
.z-bg-gd6-h {
  background: linear-gradient(to bottom, #a80077 0, #6f0 100%);
}
.z-gd7-v {
  background: -webkit-linear-gradient(45deg, #f7ff00, #db36a4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd7-h {
  background: -webkit-linear-gradient(90deg, #f7ff00, #db36a4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd7-v {
  background: linear-gradient(to right, #f7ff00 0, #db36a4 100%);
}
.z-bg-gd7-h {
  background: linear-gradient(to bottom, #f7ff00 0, #db36a4 100%);
}
.z-gd8-v {
  background: -webkit-linear-gradient(45deg, #000, #434343);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd8-h {
  background: -webkit-linear-gradient(90deg, #000, #434343);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd8-v {
  background: linear-gradient(to right, #000 0, #434343 100%);
}
.z-bg-gd8-h {
  background: linear-gradient(to bottom, #000 0, #434343 100%);
}
.z-gd9-v {
  background: -webkit-linear-gradient(45deg, #4da0b0, #d39d38);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd9-h {
  background: -webkit-linear-gradient(90deg, #4da0b0, #d39d38);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd9-v {
  background: linear-gradient(to right, #4da0b0 0, #d39d38 100%);
}
.z-bg-gd9-h {
  background: linear-gradient(to bottom, #4da0b0 0, #d39d38 100%);
}
.z-gd10-v {
  background: -webkit-linear-gradient(45deg, #c2e59c, #64b3f4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-gd10-h {
  background: -webkit-linear-gradient(90deg, #c2e59c, #64b3f4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.z-bg-gd10-v {
  background: linear-gradient(to right, #c2e59c 0, #64b3f4 100%);
}
.z-bg-gd10-h {
  background: linear-gradient(to bottom, #c2e59c 0, #64b3f4 100%);
}
.z-cpoint {
  cursor: pointer;
}
.z-cnone {
  cursor: none;
}
.z-cpro {
  cursor: progress;
}
.z-cwait {
  cursor: wait;
}
.z-low {
  opacity: 0;
}
.z-high {
  opacity: 1;
}
.z-pulse {
  animation: pulse ease-in-out alternate;
}
.zhover-pulse {
  transition: transform ease-in-out;
}
.zhover-pulse:hover {
  transform: scale(1.1);
}
.z-opulse {
  animation: pulse ease-in-out;
}
.z-roll {
  animation: roll ease-in-out alternate;
}
.z-oroll {
  animation: roll ease-in-out;
}
.z-roll-li {
  animation: roll linear;
}
.zhover-roll {
  transition: all ease-in-out;
}
.zhover-roll:hover {
  transform: rotate(360deg);
}
.z-bigmose {
  animation: bigmose ease-in-out alternate;
}
.z-obigmose {
  animation: bigmose ease-in-out;
}
.z-bounce {
  animation: bounce ease-in-out alternate;
}
.z-obounce {
  animation: bounce ease-in-out;
}
.zhover-bounce {
  transition: all ease-in-out;
}
.zhover-bounce:hover {
  transform: translateY(-15px);
}
.z-flash {
  animation: flash ease-in-out alternate;
}
.zhover-flash:hover {
  animation-name: flash;
}
.z-tada {
  animation: tada ease-in-out alternate both;
}
.zhover-tada:hover {
  animation-name: tada;
}
.z-fade-in {
  animation: fade-in ease-in-out alternate;
}
.z-ofade-in {
  animation: fade-in ease-in-out;
}
.zhover-fade-in {
  transition: all ease-in-out;
}
.zhover-fade-in:hover {
  opacity: 1;
}
.z-fade-out {
  animation: fade-out ease-in-out alternate;
}
.z-ofade-out {
  animation: fade-out ease-in-out;
}
.zhover-fade-out {
  transition: all ease-in-out;
}
.zhover-fade-out:hover {
  opacity: 0;
}
.z-to-blur {
  animation: toblur ease-in-out alternate;
}
.z-blur-to {
  animation: blurto ease-in-out alternate;
}
.zhover-to-blur {
  transition: filter ease-in-out;
}
.zhover-blur-to {
  transition: filter ease-in-out;
}
.zhover-to-blur:hover {
  filter: blur(2px);
}
.zhover-blur-to:hover {
  filter: blur(0);
}
.z-to-gray {
  animation: colortogray ease-in-out alternate;
}
.zhover-to-gray:hover {
  filter: grayscale(100%);
}
.z-gray-to {
  animation: graytocolor ease-in-out alternate;
}
.zhover-gray-to:hover {
  filter: grayscale(0);
}
.z-bg-rgb {
  animation: rgb-back ease-in-out alternate;
}
.z-rgb {
  animation: rgb-text ease-in-out alternate;
}
.z-bg-cmyk {
  animation: cmyk-back ease-in-out alternate;
}
.z-cmyk {
  animation: cmyk-text ease-in-out alternate;
}
.z-gda1 {
  animation: gd1 ease-in-out alternate;
}
.z-gda2 {
  animation: gd2 ease-in-out alternate;
}
.z-gda3 {
  animation: gd3 ease-in-out alternate;
}
.z-gda4 {
  animation: gd4 ease-in-out alternate;
}
.z-gda5 {
  animation: gd5 ease-in-out alternate;
}
.z-gda6 {
  animation: gd6 ease-in-out alternate;
}
.z-gda7 {
  animation: gd7 ease-in-out alternate;
}
.z-gda8 {
  animation: gd8 ease-in-out alternate;
}
.z-gda9 {
  animation: gd9 ease-in-out alternate;
}
.z-gda10 {
  animation: gd10 ease-in-out alternate;
}
.z-bg-gda1 {
  animation: gd1-back ease-in-out alternate;
}
.z-bg-gda2 {
  animation: gd2-back ease-in-out alternate;
}
.z-bg-gda3 {
  animation: gd3-back ease-in-out alternate;
}
.z-bg-gda4 {
  animation: gd4-back ease-in-out alternate;
}
.z-bg-gda5 {
  animation: gd5-back ease-in-out alternate;
}
.z-bg-gda6 {
  animation: gd6-back ease-in-out alternate;
}
.z-bg-gda7 {
  animation: gd7-back ease-in-out alternate;
}
.z-bg-gda8 {
  animation: gd8-back ease-in-out alternate;
}
.z-bg-gda9 {
  animation: gd9-back ease-in-out alternate;
}
.z-bg-gda10 {
  animation: gd10-back ease-in-out alternate;
}
.z-img-gray {
  filter: grayscale(100%);
}
.z-img-normal {
  filter: grayscale(0);
}
.z-blur1 {
  filter: blur(1px);
}
.z-blur2 {
  filter: blur(2px);
}
.z-blur3 {
  filter: blur(3px);
}
.z-blur4 {
  filter: blur(4px);
}
.z-blur5 {
  filter: blur(5px);
}
.z-blur6 {
  filter: blur(6px);
}
.z-blur7 {
  filter: blur(7px);
}
.z-blur8 {
  filter: blur(8px);
}
.z-blur9 {
  filter: blur(9px);
}
.z-blur10 {
  filter: blur(10px);
}
.z-for {
  animation-fill-mode: forwards;
}
.z-back {
  animation-fill-mode: backwards;
}
.z-both {
  animation-fill-mode: both;
}
.z-repeat {
  animation-iteration-count: infinite;
}
.z-inherit {
  animation-iteration-count: inherit;
}
.z-initial {
  animation-iteration-count: initial;
}
.z-unset {
  animation-iteration-count: unset;
}
.z-alt {
  animation-direction: alternate;
}
.z-alt-rev {
  animation-direction: alternate-reverse;
}
.z-normal {
  animation-direction: normal;
}
.z-rev {
  animation-direction: reverse;
}
.z-line {
  animation-timing-function: linear;
}
.z-ease {
  animation-timing-function: ease;
}
.z-easein {
  animation-timing-function: ease-in;
}
.z-easeout {
  animation-timing-function: ease-out;
}
.z-easeio {
  animation-timing-function: ease-in-out;
}
.zt--1 {
  animation-duration: 0.1s;
}
.zt--2 {
  animation-duration: 0.2s;
}
.zt--3 {
  animation-duration: 0.3s;
}
.zt--4 {
  animation-duration: 0.4s;
}
.zt--5 {
  animation-duration: 0.5s;
}
.zt--6 {
  animation-duration: 0.6s;
}
.zt--7 {
  animation-duration: 0.7s;
}
.zt--8 {
  animation-duration: 0.8s;
}
.zt--9 {
  animation-duration: 0.9s;
}
.zt-1 {
  animation-duration: 1s;
}
.zt-2 {
  animation-duration: 2s;
}
.zt-3 {
  animation-duration: 3s;
}
.zt-4 {
  animation-duration: 4s;
}
.zt-5 {
  animation-duration: 5s;
}
.zt-6 {
  animation-duration: 6s;
}
.zt-7 {
  animation-duration: 7s;
}
.zt-8 {
  animation-duration: 8s;
}
.zt-9 {
  animation-duration: 9s;
}
.zt-10 {
  animation-duration: 10s;
}
.ztt--1 {
  transition-duration: 0.1s;
}
.ztt--2 {
  transition-duration: 0.2s;
}
.ztt--3 {
  transition-duration: 0.3s;
}
.ztt--4 {
  transition-duration: 0.4s;
}
.ztt--5 {
  transition-duration: 0.5s;
}
.ztt--6 {
  transition-duration: 0.6s;
}
.ztt--7 {
  transition-duration: 0.7s;
}
.ztt--8 {
  transition-duration: 0.8s;
}
.ztt--9 {
  transition-duration: 0.9s;
}
.ztt-1 {
  transition-duration: 1s;
}
.ztt-2 {
  transition-duration: 2s;
}
.ztt-3 {
  transition-duration: 3s;
}
.ztt-4 {
  transition-duration: 4s;
}
.ztt-5 {
  transition-duration: 5s;
}
.ztt-6 {
  transition-duration: 6s;
}
.ztt-7 {
  transition-duration: 7s;
}
.ztt-8 {
  transition-duration: 8s;
}
.ztt-9 {
  transition-duration: 9s;
}
.ztt-10 {
  transition-duration: 10s;
}
.zd--5 {
  animation-delay: 0.5s;
}
.zd-1 {
  animation-delay: 1s;
}
.zd-2 {
  animation-delay: 2s;
}
.zd-3 {
  animation-delay: 3s;
}
.zd-4 {
  animation-delay: 4s;
}
.zd-5 {
  animation-delay: 5s;
}
.zd-6 {
  animation-delay: 6s;
}
.zd-7 {
  animation-delay: 7s;
}
.zd-8 {
  animation-delay: 8s;
}
.zd-9 {
  animation-delay: 9s;
}
.zd-10 {
  animation-delay: 10s;
}
.zhover-rail {
  position: relative;
}
.zhover-rail::before {
  transform: scaleX(0);
  transform-origin: bottom right;
}
.zhover-rail:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.zhover-rail::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: hsl(200 100% 80%);
  z-index: -1;
  transition: transform 0.3s ease;
}
.zhover-rail-full::before {
  transform: scaleX(0);
  transform-origin: bottom right;
}
.zhover-rail-full:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.zhover-rail-full::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: hsl(200 100% 80%);
  z-index: -1;
  transition: transform 0.3s ease;
}
.z-loader {
  background-color: #ecf0f1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  z-index: 100000;
}
.z-loader-el {
  border-radius: 100%;
  border: 7px solid var(--zeal-color);
  margin: calc(5px * 2);
}
.z-loader-el:nth-child(1) {
  animation: preloader 0.6s ease-in-out alternate infinite;
}
.z-loader-el:nth-child(2) {
  animation: preloader 0.6s ease-in-out alternate 0.2s infinite;
}
.z-loader-el:nth-child(3) {
  animation: preloader 0.6s ease-in-out alternate 0.4s infinite;
}
.z-loader-el:nth-child(4) {
  animation: preloader 0.6s ease-in-out alternate 0.6s infinite;
}
.z-loader-el:nth-child(5) {
  animation: preloader 0.6s ease-in-out alternate 0.8s infinite;
}
.z-loader-el:nth-child(6) {
  animation: preloader 0.6s ease-in-out alternate 0.1s infinite;
}
.z-loader-el:nth-child(7) {
  animation: preloader 0.6s ease-in-out alternate 0.12s infinite;
}
.z-loader-el:nth-child(8) {
  animation: preloader 0.6s ease-in-out alternate 0.14s infinite;
}
.z-loader-el:nth-child(9) {
  animation: preloader 0.6s ease-in-out alternate 0.16s infinite;
}
.z-loader-el:nth-child(10) {
  animation: preloader 0.6s ease-in-out alternate 0.18s infinite;
}
figure {
  width: 300px;
  height: 200px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
figure .zhover-img-zoomin {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-zoomin {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
figure .zhover-img-zoomscalein {
  width: 300px;
  height: auto;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-zoomscalein {
  width: 350px;
}
figure .zhover-img-zoomout {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-zoomout {
  -webkit-transform: scale(1);
  transform: scale(1);
}
figure .zhover-img-zoomscaleout {
  width: 400px;
  height: auto;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-zoomscaleout {
  width: 300px;
}
figure .zhover-img-slide {
  margin-left: 30px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-slide {
  margin-left: 0;
}
figure .zhover-img-rotate {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-rotate {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}
figure .zhover-img-sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-sepia {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}
figure .zhover-img-blurgray {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-blurgray {
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}
figure .zhover-img-opacity {
  opacity: 1;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure:hover .zhover-img-opacity {
  opacity: 0.5;
}
figure:hover .zhover-img-flash {
  opacity: 1;
  -webkit-animation: flash2 1.5s;
  animation: flash2 1.5s;
}
.zhover-figure-shine {
  position: relative;
}
.zhover-figure-shine::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.3) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.3) 100%
  );
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.zhover-figure-shine:hover::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}
.zhover-figure-circle {
  position: relative;
}
.zhover-figure-circle::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: "";
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.zhover-figure-circle:hover::before {
  -webkit-animation: circle 0.75s;
  animation: circle 0.75s;
}
.z-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.z-btn {
  padding: 15px 30px;
  transition: all 0.5s;
  border: 0 none;
  border-radius: 5em;
  text-transform: uppercase;
  font-size: 1em;
  margin-right: 20px;
  outline: 0;
}
.z-ripple-down {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eee 50%, var(--zeal-color) 50%);
}
.z-ripple-back {
  background-size: 200% 100%;
  background-image: linear-gradient(to right, #eee 50%, var(--zeal-color) 50%);
}
.z-ripple-for {
  background-size: 200% 100%;
  background-position: right bottom;
  background-image: linear-gradient(to left, #eee 50%, var(--zeal-color) 0);
}
.z-ripple-both {
  background-color: #eee;
  background-image: linear-gradient(var(--zeal-color), var(--zeal-color));
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0 100%;
}
.z-btn:hover {
  color: #fff;
}
.z-ripple-down:hover {
  background-position: 0 -100%;
}
.z-ripple-back:hover {
  background-position: 100%;
}
.z-ripple-for:hover {
  background-position: left bottom;
}
.z-ripple-both:hover {
  background-size: 100% 100%;
}
.z-btn-gotop {
  cursor: pointer;
  position: fixed;
  top: 89%;
  left: 95%;
  z-index: 999;
  color: #fff;
  background: var(--zeal-color);
  font-size: 25px;
  padding: 8px 8px;
  border-radius: 100px;
  box-shadow: 0 0 3px 2px var(--zeal-color);
  transition: 0.3s;
  text-decoration: none;
}
.z-btn-gotop:hover {
  background: #fff;
  color: #000;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes roll {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes bigmose {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 100vw;
    height: 100vh;
  }
}
@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20px);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes rgb-back {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: #00f;
  }
}
@keyframes rgb-text {
  0% {
    color: red;
  }
  50% {
    color: green;
  }
  100% {
    color: #00f;
  }
}
@keyframes cmyk-back {
  0% {
    background-color: #0ff;
  }
  30% {
    background-color: #ff00ff;
  }
  60% {
    background-color: #ff0;
  }
  100% {
    background-color: #000;
  }
}
@keyframes cmyk-text {
  0% {
    color: #0ff;
  }
  30% {
    color: #ff00ff;
  }
  60% {
    color: #ff0;
  }
  100% {
    color: #000;
  }
}
@keyframes gd1 {
  0% {
    color: #3cf;
  }
  100% {
    color: #f9c;
  }
}
@keyframes gd1-back {
  0% {
    background-color: #3cf;
  }
  100% {
    background-color: #f9c;
  }
}
@keyframes gd2 {
  0% {
    color: #2196f3;
  }
  100% {
    color: #f44336;
  }
}
@keyframes gd2-back {
  0% {
    background-color: #2196f3;
  }
  100% {
    background-color: #f44336;
  }
}
@keyframes gd3 {
  0% {
    color: #ff5f6d;
  }
  100% {
    color: #ffc371;
  }
}
@keyframes gd3-back {
  0% {
    background-color: #ff5f6d;
  }
  100% {
    background-color: #ffc371;
  }
}
@keyframes gd4 {
  0% {
    color: #16bffd;
  }
  100% {
    color: #cb3066;
  }
}
@keyframes gd4-back {
  0% {
    background-color: #16bffd;
  }
  100% {
    background-color: #cb3066;
  }
}
@keyframes gd5 {
  0% {
    color: #eecda3;
  }
  100% {
    color: #ef629f;
  }
}
@keyframes gd5-back {
  0% {
    background-color: #eecda3;
  }
  100% {
    background-color: #ef629f;
  }
}
@keyframes gd6 {
  0% {
    color: #a80077;
  }
  100% {
    color: #6f0;
  }
}
@keyframes gd6-back {
  0% {
    background-color: #a80077;
  }
  100% {
    background-color: #6f0;
  }
}
@keyframes gd7 {
  0% {
    color: #f7ff00;
  }
  100% {
    color: #db36a4;
  }
}
@keyframes gd7-back {
  0% {
    background-color: #f7ff00;
  }
  100% {
    background-color: #db36a4;
  }
}
@keyframes gd8 {
  0% {
    color: #000;
  }
  100% {
    color: #434343;
  }
}
@keyframes gd8-back {
  0% {
    background-color: #000;
  }
  100% {
    background-color: #434343;
  }
}
@keyframes gd9 {
  0% {
    color: #4da0b0;
  }
  100% {
    color: #d39d38;
  }
}
@keyframes gd9-back {
  0% {
    background-color: #4da0b0;
  }
  100% {
    background-color: #d39d38;
  }
}
@keyframes gd10 {
  0% {
    color: #c2e59c;
  }
  100% {
    color: #64b3f4;
  }
}
@keyframes gd10-back {
  0% {
    background-color: #c2e59c;
  }
  100% {
    background-color: #64b3f4;
  }
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes graytocolor {
  from {
    filter: grayscale(100%);
  }
  to {
    filter: grayscale(0);
  }
}
@keyframes colortogray {
  from {
    filter: grayscale(0);
  }
  to {
    filter: grayscale(100%);
  }
}
@keyframes toblur {
  from {
    filter: blur(0);
  }
  to {
    filter: blur(2px);
  }
}
@keyframes blurto {
  from {
    filter: blur(2px);
  }
  to {
    filter: blur(0);
  }
}
@keyframes preloader {
  100% {
    transform: scale(2);
  }
}
@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@-webkit-keyframes flash2 {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash2 {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}