/**
 * Settings for colors
 */

/**
 * Platform base spacing unit
 */

/**
 * Variations
 */

/**
 * Colors variables
 */

/* Black */

/* Blue */

/* Brown */

/* Green */

/* Grey */

/* Orange */

/* Red */

/* Taupe */

/* Transparent */

/* Yellow */

/* White */

/**
 * Base color usage
 */

/**
 * Base platform properties
 */

/**
 * Fonts
 */

/**
 * Copy text styling
 */

/**
 * Variables to include as .bg--{key}
 *
 * Example:
 * dark: #000000
 *
 * will be compiled to
 * .bg--dark { background-color: #000000; }
 *
 * Used in /partials/_colors.scss
 */

/**
 * Variables to include as .text--{key}
 *
 * Example:
 * 'negative': #ff0000
 *
 * will be compiled to
 * .text--negative { color: #ff0000; }
 *
 * Used in /partials/_colors.scss
 */

/**
 * Variables to include as .border--{key}
 *
 * Example:
 * 'negative': #ff0000
 *
 * will be compiled to
 * .border--negative { color: #ff0000; }
 *
 * Used in /partials/_colors.scss
 */

/**
 * Variables to include as .{key}
 *
 * Example:
 * 'container': 980px
 *
 * will be compiled to
 * .container { width: 980px; margin: 0 auto; }
 *
 * Used in /partials/_containers.scss
 */

/**
 * Icon sizes
 */

/**
 * Input specs
 */

/**
 * Headings sizes
 * [1] - Used for .giga
 * [2] - Used for desk, lap & palm h1
 * [3] - Used for desk & lap h2
 * [4] - Used for desk & lap h3 AND palm h2, h3, h4
 * [5] - Used for desk, lap h4 AND palm h5
 * [6] - Used for desk, lap h5
 * [7] - Used for palm .palm-zeta
 * [8] - Used for palm .palm-milli
 * [9] - Used for .micro
 * [10] - Used for .nano
 *
 * CHEATSHEET
 * Desk & Lap:
 * h1, .giga - 60px
 * .alpha - 48px
 * h2, .beta - 36px
 * h3, .gamma - 24px
 * h4, .delta - 20px
 * h5, .epsilon - 16px
 * h6, .zeta - 14px
 * .milli - 12px
 *
 * Palm:
 * h1, .giga - 36px
 * .alpha - 48px
 * h2, .beta - 24px
 * h3, .gamma - 24px
 * h4, .delta - 24px
 * h5, .epsilon - 20px
 * h6, .epsilon - 14px
 * .milli - 12px
 */

/* [1] */

/* [2] */

/* [3] */

/* [4] */

/* [5] */

/* [6] */

/* [7] */

/* [8] */

/* [9] */

/* [10] */

.s-sparkle-red {
  width: 16px;
  height: 16px;
  background-image: inline-svg("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 39.86'><g ><path d='M0 19.93C16.86 18.25 18.26 16.85 20 0c1.74 16.85 3.14 18.25 20 19.93C23.14 21.61 21.74 23 20 39.86 18.26 23 16.86 21.61 0 19.93z' fill='#b71234'/></g></svg>");
  background-size: contain;
  background-position: center !important;
}

.s-sparkle-white {
  width: 16px;
  height: 16px;
  background-image: inline-svg("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 39.86'><g ><path d='M0 19.93C16.86 18.25 18.26 16.85 20 0c1.74 16.85 3.14 18.25 20 19.93C23.14 21.61 21.74 23 20 39.86 18.26 23 16.86 21.61 0 19.93z' fill='#fff'/></g></svg>");
  background-size: contain;
  background-position: center !important;
}

@-webkit-keyframes sparkle {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

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

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

@keyframes sparkle {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

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

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

@-webkit-keyframes fancy-rule {
  0% {
    width: 0;
  }

  100% {
    width: 50%;
  }
}

@keyframes fancy-rule {
  0% {
    width: 0;
  }

  100% {
    width: 50%;
  }
}

@-webkit-keyframes fancy-rule100 {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes fancy-rule100 {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

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

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

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

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  10% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

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

  10% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/**
 * Animated Fancy Rules
 */

.fancy-rule--animated .animated-s-apple--container::before,
.fancy-rule--animated .animated-s-egg-cracked--container::before,
.fancy-rule--animated .animated-s-goat-head--container::before {
  content: '';
  background: currentColor;
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  border-radius: 100px;
  top: 6px;
  left: 2px;
  -webkit-animation: fadeIn 300ms forwards;
  animation: fadeIn 300ms forwards;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
  animation-direction: reverse;
}

.fancy-rule--animated .animated-s-egg-cracked--container::before {
  width: 10px;
  height: 20px;
  top: 2px;
  left: 8px;
}

.fancy-rule--animated .animated-s-goat-head--container::before {
  top: 10px;
  left: 10px;
  width: 10px;
  height: 5px;
  -webkit-animation: blinkEyes 6s infinite;
  animation: blinkEyes 6s infinite;
}

.fancy-rule--animated .animated-s-nightsky--container::before,
.fancy-rule--animated .animated-s-nightsky--container::after {
  position: absolute;
  content: '';
  opacity: 0;
  display: block;
  background-color: transparent;
  background-size: cover;
  background-position: center !important;
  -webkit-animation: fadeIn 2s forwards;
  animation: fadeIn 2s forwards;
}

.fancy-rule--animated .animated-s-nightsky--container::before {
  right: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012.04%2012.17%27%3E%3Cg%3E%3Cpath%20d%3D%27M12.04%203.2l-4.54.77L5.17%200%204.5%204.55%200%205.54l4.13%202.05-.45%204.58L6.9%208.88l4.22%201.84-2.14-4.08%203.06-3.44z%27%20fill%3D%27%23b71234%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.fancy-rule--animated.fancy-rule--white .animated-s-nightsky--container::before {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012.04%2012.17%27%3E%3Cg%3E%3Cpath%20d%3D%27M12.04%203.2l-4.54.77L5.17%200%204.5%204.55%200%205.54l4.13%202.05-.45%204.58L6.9%208.88l4.22%201.84-2.14-4.08%203.06-3.44z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.fancy-rule--animated .animated-s-nightsky--container::after {
  right: 7px;
  top: 0;
  width: 11px;
  height: 10px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014.95%2013.61%27%3E%3Cpath%20d%3D%27M9.33%205.44l1.18%203.17%201.06-3.21%203.38-.14-2.72-2L13.14%200l-2.75%201.97L7.58.1%208.6%203.32l-2.65%202.1%203.38.02z%27%20fill%3D%27%23b71234%27%2F%3E%3Cpath%20d%3D%27M1.26%2013.61l2.06-1.42%202.05%201.42-.72-2.39L6.64%209.7l-2.5-.06-.82-2.35-.83%202.35L0%209.7l1.98%201.52-.72%202.39z%27%20fill%3D%27%23b71234%27%2F%3E%3C%2Fsvg%3E");
  -webkit-animation: fadeIn 2s forwards;
  animation: fadeIn 2s forwards;
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}

.fancy-rule--animated.fancy-rule--white .animated-s-nightsky--container::after {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014.95%2013.61%27%3E%3Cpath%20d%3D%27M9.33%205.44l1.18%203.17%201.06-3.21%203.38-.14-2.72-2L13.14%200l-2.75%201.97L7.58.1%208.6%203.32l-2.65%202.1%203.38.02z%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M1.26%2013.61l2.06-1.42%202.05%201.42-.72-2.39L6.64%209.7l-2.5-.06-.82-2.35-.83%202.35L0%209.7l1.98%201.52-.72%202.39z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
}

.fancy-rule--animated .animated-s-battery--container::before,
.fancy-rule--animated .animated-s-battery--container::after {
  content: '';
  background: currentColor;
  width: 4px;
  height: 9px;
  display: block;
  position: absolute;
  border-radius: 1px;
  top: 11px;
  left: 13px;
  -webkit-transform: rotate(13deg);
  transform: rotate(13deg);
  -webkit-animation: fadeIn 2500ms infinite;
  animation: fadeIn 2500ms infinite;
  -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
}

.fancy-rule--animated .animated-s-battery--container::after {
  left: 19px;
  top: 12px;
  -webkit-animation: fadeInDelay 2500ms infinite;
  animation: fadeInDelay 2500ms infinite;
}

.fancy-rule--animated .animated-s-butterfly--container {
  -webkit-transform: translateZ(-100px);
  transform: translateZ(-100px);
}

.fancy-rule--animated .animated-s-butterfly {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-animation: butterfly 4s infinite;
  animation: butterfly 4s infinite;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-webkit-keyframes butterfly {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  30% {
    -webkit-transform: rotateY(-50deg);
    transform: rotateY(-50deg);
  }

  50% {
    -webkit-transform: rotateY(-20deg);
    transform: rotateY(-20deg);
  }

  70% {
    -webkit-transform: rotateY(-50deg);
    transform: rotateY(-50deg);
  }

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

@keyframes butterfly {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  30% {
    -webkit-transform: rotateY(-50deg);
    transform: rotateY(-50deg);
  }

  50% {
    -webkit-transform: rotateY(-20deg);
    transform: rotateY(-20deg);
  }

  70% {
    -webkit-transform: rotateY(-50deg);
    transform: rotateY(-50deg);
  }

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

.fancy-rule--animated .animated-s-diamond--container::before,
.fancy-rule--animated .animated-s-diamond--container::after {
  width: 0.5em;
  height: 0.5em;
  content: '';
  display: block;
  position: absolute;
  top: -0.5em;
  left: 0;
  -webkit-animation: sparkle 4s infinite;
  animation: sparkle 4s infinite;
}

.fancy-rule--animated .animated-s-diamond--container::after {
  top: 0.5em;
  left: auto;
  right: -0.5em;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.fancy-rule--animated.fancy-rule--red .animated-s-diamond--container::before,
.fancy-rule--animated.fancy-rule--red .animated-s-diamond--container::after {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2039.86%27%3E%3Cg%20%3E%3Cpath%20d%3D%27M0%2019.93C16.86%2018.25%2018.26%2016.85%2020%200c1.74%2016.85%203.14%2018.25%2020%2019.93C23.14%2021.61%2021.74%2023%2020%2039.86%2018.26%2023%2016.86%2021.61%200%2019.93z%27%20fill%3D%27%23b71234%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-position: center !important;
}

.fancy-rule--animated.fancy-rule--white .animated-s-diamond--container::before,
.fancy-rule--animated.fancy-rule--white .animated-s-diamond--container::after {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2039.86%27%3E%3Cg%20%3E%3Cpath%20d%3D%27M0%2019.93C16.86%2018.25%2018.26%2016.85%2020%200c1.74%2016.85%203.14%2018.25%2020%2019.93C23.14%2021.61%2021.74%2023%2020%2039.86%2018.26%2023%2016.86%2021.61%200%2019.93z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-position: center !important;
}

.fancy-rule--animated .animated-s-fairy {
  -webkit-animation: fairy 8s infinite;
  animation: fairy 8s infinite;
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
}

@-webkit-keyframes fairy {
  0% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }

  20% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }

  40% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  60% {
    -webkit-transform: translate(5px, -10px);
    transform: translate(5px, -10px);
  }

  100% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }
}

@keyframes fairy {
  0% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }

  20% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }

  40% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  60% {
    -webkit-transform: translate(5px, -10px);
    transform: translate(5px, -10px);
  }

  100% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }
}

.fancy-rule--animated .animated-s-ferris-wheel--container::before,
.fancy-rule--animated .animated-s-ferris-wheel--container::after {
  content: '';
  position: absolute;
  bottom: -0.4em;
  left: 50%;
  width: 0.15em;
  height: 1.4em;
  background: currentColor;
  -webkit-transform: rotate(24deg) translateX(-0.4em);
  transform: rotate(24deg) translateX(-0.4em);
}

.fancy-rule--animated .animated-s-ferris-wheel--container::after {
  -webkit-transform: rotate(-24deg) translateX(0.4em);
  transform: rotate(-24deg) translateX(0.4em);
  left: auto;
  right: 50%;
}

.fancy-rule--animated .animated-s-ferris-wheel {
  -webkit-animation: ferrisWheel 12s infinite linear;
  animation: ferrisWheel 12s infinite linear;
}

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

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

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

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

.fancy-rule--animated .animated-s-frog-king--container::after {
  content: '';
  border: 0.1em dashed transparent;
  border-top-color: currentColor;
  display: block;
  position: absolute;
  width: 5em;
  height: 5em;
  left: 50%;
  top: -0.5em;
  border-radius: 50%;
  -webkit-animation: frogKing 4s linear infinite;
  animation: frogKing 4s linear infinite;
}

@-webkit-keyframes frogKing {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-50deg);
    transform: rotateZ(-50deg);
  }

  15% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -webkit-transform: rotateZ(30deg);
    transform: rotateZ(30deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: rotateZ(-50deg);
    transform: rotateZ(-50deg);
  }
}

@keyframes frogKing {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-50deg);
    transform: rotateZ(-50deg);
  }

  15% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -webkit-transform: rotateZ(30deg);
    transform: rotateZ(30deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: rotateZ(-50deg);
    transform: rotateZ(-50deg);
  }
}

.fancy-rule--animated .animated-s-halve-maen {
  -webkit-transform: rotate(-100deg);
  transform: rotate(-100deg);
  -webkit-animation: halvemaen 8s infinite;
  animation: halvemaen 8s infinite;
}

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

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

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

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

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

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

.fancy-rule--animated .animated-s-mine-cart {
  -webkit-animation: mine-cart 2s infinite;
  animation: mine-cart 2s infinite;
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
}

@-webkit-keyframes mine-cart {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  10% {
    -webkit-transform: translate(0, 1px);
    transform: translate(0, 1px);
  }

  20% {
    -webkit-transform: translate(0, -1px);
    transform: translate(0, -1px);
  }

  30% {
    -webkit-transform: translate(0, 1px);
    transform: translate(0, 1px);
  }

  40% {
    -webkit-transform: translate(0, 0) rotate(-10deg);
    transform: translate(0, 0) rotate(-10deg);
  }

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

  60% {
    -webkit-transform: translate(0, 0) rotate(10deg);
    transform: translate(0, 0) rotate(10deg);
  }

  70% {
    -webkit-transform: translate(0, 1px);
    transform: translate(0, 1px);
  }

  80% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  90% {
    -webkit-transform: translate(0, -1px);
    transform: translate(0, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes mine-cart {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  10% {
    -webkit-transform: translate(0, 1px);
    transform: translate(0, 1px);
  }

  20% {
    -webkit-transform: translate(0, -1px);
    transform: translate(0, -1px);
  }

  30% {
    -webkit-transform: translate(0, 1px);
    transform: translate(0, 1px);
  }

  40% {
    -webkit-transform: translate(0, 0) rotate(-10deg);
    transform: translate(0, 0) rotate(-10deg);
  }

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

  60% {
    -webkit-transform: translate(0, 0) rotate(10deg);
    transform: translate(0, 0) rotate(10deg);
  }

  70% {
    -webkit-transform: translate(0, 1px);
    transform: translate(0, 1px);
  }

  80% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  90% {
    -webkit-transform: translate(0, -1px);
    transform: translate(0, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.fancy-rule--animated .animated-s-pagode--container {
  display: inline-block;
  overflow: hidden;
}

.fancy-rule--animated .animated-s-pagode {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform: translate(-4px, 0);
  transform: translate(-4px, 0);
  -webkit-animation: pagode 8s infinite;
  animation: pagode 8s infinite;
}

@-webkit-keyframes pagode {
  0% {
    -webkit-transform: translate(-4px, 0);
    transform: translate(-4px, 0);
  }

  50% {
    -webkit-transform: translate(4px, 11px);
    transform: translate(4px, 11px);
  }

  100% {
    -webkit-transform: translate(-4px, 0);
    transform: translate(-4px, 0);
  }
}

@keyframes pagode {
  0% {
    -webkit-transform: translate(-4px, 0);
    transform: translate(-4px, 0);
  }

  50% {
    -webkit-transform: translate(4px, 11px);
    transform: translate(4px, 11px);
  }

  100% {
    -webkit-transform: translate(-4px, 0);
    transform: translate(-4px, 0);
  }
}

.fancy-rule--animated .animated-s-parking {
  -webkit-animation: ridingCar 8s infinite;
  animation: ridingCar 8s infinite;
  will-change: transform;
}

@-webkit-keyframes ridingCar {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  20% {
    -webkit-transform: translate(4px, 0);
    transform: translate(4px, 0);
  }

  40% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    -webkit-transform: translate(-4px, 0);
    transform: translate(-4px, 0);
  }

  60% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  80% {
    -webkit-transform: translate(4px, 0);
    transform: translate(4px, 0);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes ridingCar {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  20% {
    -webkit-transform: translate(4px, 0);
    transform: translate(4px, 0);
  }

  40% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    -webkit-transform: translate(-4px, 0);
    transform: translate(-4px, 0);
  }

  60% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  80% {
    -webkit-transform: translate(4px, 0);
    transform: translate(4px, 0);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.fancy-rule--animated .animated-s-pirana-boat {
  -webkit-animation: pirana 8s infinite;
  animation: pirana 8s infinite;
  will-change: transform;
}

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

  30% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

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

  80% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

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

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

  30% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

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

  80% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

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

.fancy-rule--animated .animated-s-raven-flight {
  -webkit-animation: flyingRaven 4s infinite;
  animation: flyingRaven 4s infinite;
  will-change: transform;
}

@-webkit-keyframes flyingRaven {
  0% {
    -webkit-transform: skew(0, 0);
    transform: skew(0, 0);
  }

  40% {
    -webkit-transform: skew(-20deg, -20deg);
    transform: skew(-20deg, -20deg);
  }

  60% {
    -webkit-transform: skew(-10deg, -10deg);
    transform: skew(-10deg, -10deg);
  }

  80% {
    -webkit-transform: skew(-20deg, -20deg);
    transform: skew(-20deg, -20deg);
  }

  100% {
    -webkit-transform: skew(0, 0);
    transform: skew(0, 0);
  }
}

@keyframes flyingRaven {
  0% {
    -webkit-transform: skew(0, 0);
    transform: skew(0, 0);
  }

  40% {
    -webkit-transform: skew(-20deg, -20deg);
    transform: skew(-20deg, -20deg);
  }

  60% {
    -webkit-transform: skew(-10deg, -10deg);
    transform: skew(-10deg, -10deg);
  }

  80% {
    -webkit-transform: skew(-20deg, -20deg);
    transform: skew(-20deg, -20deg);
  }

  100% {
    -webkit-transform: skew(0, 0);
    transform: skew(0, 0);
  }
}

.fancy-rule--animated .animated-s-rudder {
  -webkit-animation: rudder 8s infinite;
  animation: rudder 8s infinite;
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
  will-change: transform;
}

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

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

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

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

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

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

.fancy-rule--animated .animated-s-shield {
  -webkit-animation: shield 4s infinite;
  animation: shield 4s infinite;
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fancy-rule--animated .animated-s-jokie {
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
  -webkit-animation: jokie 4s infinite;
  animation: jokie 4s infinite;
  will-change: transform;
}

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

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

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

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

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

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

.fancy-rule--animated .animated-s-max-moritz {
  -webkit-animation: maxMoritz 4s infinite;
  animation: maxMoritz 4s infinite;
  will-change: transform;
}

@-webkit-keyframes maxMoritz {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

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

  45% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

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

  55% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

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

  80% {
    opacity: 1;
  }

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

@keyframes maxMoritz {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

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

  45% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

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

  55% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

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

  80% {
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }
}
/*# sourceMappingURL=animated.css.map */