.elementor-12 .elementor-element.elementor-element-320ba63{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-12 .elementor-element.elementor-element-40bca02.elementor-element{--align-self:center;}.elementor-12 .elementor-element.elementor-element-40bca02 .elementor-icon-wrapper{text-align:center;}.elementor-12 .elementor-element.elementor-element-40bca02 .elementor-icon{font-size:500px;}.elementor-12 .elementor-element.elementor-element-40bca02 .elementor-icon svg{height:500px;}.elementor-12 .elementor-element.elementor-element-61718d1{text-align:center;font-size:30px;font-weight:600;}@media(min-width:901px){.elementor-12 .elementor-element.elementor-element-320ba63{--content-width:562px;}}/* Start custom CSS for icon, class: .elementor-element-40bca02 *//* Remove Elementor's inline/baseline spacing */
.grumble-logo .elementor-icon-wrapper {
  display: block;
  line-height: 0;
}

.grumble-logo .elementor-icon {
  display: block;
  line-height: 0;
}

/* Let the wide logo use its natural aspect ratio */
.grumble-logo .elementor-icon svg {
  display: block;
  max-width:100%;
  height: auto !important;
  overflow: visible;
}

/* Whole-logo fade and color cycle */
.grumble-logo svg {
  opacity: 0;
  overflow: visible;
  animation:
    grumbleFadeIn 0.6s ease-out forwards,
    grumbleColorCycle 2s linear 1.1s infinite;
}

/* Make each letter rotate around itself */
.grumble-logo svg [id^="letter-"] {
  transform-box: fill-box;
  transform-origin: center;
}

/* Cascading rumble */
.grumble-logo svg #letter-g {
  animation: grumbleRumble 1s ease-out 0.10s forwards;
}

.grumble-logo svg #letter-r {
  animation: grumbleRumble 0.9s ease-out 0.15s forwards;
}

.grumble-logo svg #letter-u {
  animation: grumbleRumble 0.8s ease-out 0.20s forwards;
}

.grumble-logo svg #letter-m {
  animation: grumbleRumble 0.8s ease-out 0.25s forwards;
}

.grumble-logo svg #letter-b {
  animation: grumbleRumble 0.7s ease-out 0.30s forwards;
}

.grumble-logo svg #letter-l {
  animation: grumbleRumble 0.6s ease-out 0.35s forwards;
}

.grumble-logo svg #letter-e {
  animation: grumbleRumble 0.5s ease-out 0.40s forwards;
}

@keyframes grumbleFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes grumbleRumble {
  0%   { transform: rotate(0deg)  translate(0, 0); }
  15%  { transform: rotate(-6deg) translate(-1px, 1px); }
  35%  { transform: rotate(5deg)  translate(1px, -1px); }
  55%  { transform: rotate(-3deg) translate(-1px, 0); }
  75%  { transform: rotate(2deg)  translate(0, -1px); }
  100% { transform: rotate(0deg)  translate(0, 0); }
}

@keyframes grumbleColorCycle {
  0%   { fill: hsl(0 0% 0%); }
  14%  { fill: hsl(0 100% 50%); }
  37%  { fill: hsl(287 100% 37%); }
  58%  { fill: hsl(22 100% 50%); }
  78%  { fill: hsl(110 100% 30%); }
  100% { fill: hsl(0 0% 0%); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .grumble-logo svg,
  .grumble-logo svg [id^="letter-"] {
    animation: none !important;
    opacity: 1;
  }
}/* End custom CSS */