/* line 18, ../scss/dancing_beans.scss */
.svg-container {
  width: 75%;
  max-width: 500px;
  margin: 0 auto;
}

/* line 24, ../scss/dancing_beans.scss */
.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

/* line 31, ../scss/dancing_beans.scss */
.inline-bean {
  position: relative;
  float: left;
  width: 33%;
}

/* line 37, ../scss/dancing_beans.scss */
.toggle {
  font-family: arial;
  text-transform: uppercase;
  display: table;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 10px;
  transition: .4s ease-in-out;
  cursor: pointer;
}
/* line 46, ../scss/dancing_beans.scss */
.toggle.dance {
  border: 2px solid #48C5D3;
  color: #48C5D3;
}
/* line 49, ../scss/dancing_beans.scss */
.toggle.dance.active {
  color: #fff;
  background-color: #48C5D3;
  transition: 0.4s ease-in-out;
}
/* line 55, ../scss/dancing_beans.scss */
.toggle.whistle {
  border: 2px solid #FB9245;
  color: #FB9245;
}
/* line 58, ../scss/dancing_beans.scss */
.toggle.whistle.active {
  color: #fff;
  background-color: #FB9245;
  transition: 0.4s ease-in-out;
}
/* line 64, ../scss/dancing_beans.scss */
.toggle.shake {
  border: 2px solid #384EAF;
  color: #384EAF;
}
/* line 67, ../scss/dancing_beans.scss */
.toggle.shake.active {
  color: #fff;
  background-color: #384EAF;
  transition: 0.4s ease-in-out;
}

/* line 76, ../scss/dancing_beans.scss */
.blue {
  color: #48C5D3;
}

/* line 79, ../scss/dancing_beans.scss */
.light-blue {
  color: #65B6EE;
}

/* line 83, ../scss/dancing_beans.scss */
.orange {
  color: #FB9245;
}

/* line 87, ../scss/dancing_beans.scss */
.purple {
  color: #384EAF;
}

/* line 92, ../scss/dancing_beans.scss */
#bluebean * {
  -webkit-transform-style: preserve-3d;
}
/* line 95, ../scss/dancing_beans.scss */
#bluebean .left-leg, #bluebean .right-leg {
  stroke: #48C5D3;
  fill: none;
}
/* line 99, ../scss/dancing_beans.scss */
#bluebean .left-foot, #bluebean .right-foot {
  stroke: #48C5D3;
  color: #48C5D3;
}

/* line 106, ../scss/dancing_beans.scss */
#lightbluebean * {
  -webkit-transform-style: preserve-3d;
}
/* line 109, ../scss/dancing_beans.scss */
#lightbluebean .left-leg, #lightbluebean .right-leg {
  stroke: #65B6EE;
  fill: none;
}
/* line 113, ../scss/dancing_beans.scss */
#lightbluebean .left-foot, #lightbluebean .right-foot {
  stroke: #65B6EE;
  color: #65B6EE;
}

/* line 120, ../scss/dancing_beans.scss */
#orangebean * {
  -webkit-transform-style: preserve-3d;
}
/* line 123, ../scss/dancing_beans.scss */
#orangebean .left-leg, #orangebean .right-leg {
  stroke: #FB9245;
  fill: none;
}
/* line 127, ../scss/dancing_beans.scss */
#orangebean .left-foot, #orangebean .right-foot {
  stroke: #FB9245;
  color: #FB9245;
}

/* line 135, ../scss/dancing_beans.scss */
#purplebean * {
  -webkit-transform-style: preserve-3d;
}
/* line 138, ../scss/dancing_beans.scss */
#purplebean .left-leg, #purplebean .right-leg {
  stroke: #384EAF;
  fill: none;
}
/* line 142, ../scss/dancing_beans.scss */
#purplebean .left-foot, #purplebean .right-foot {
  stroke: #384EAF;
  color: #384EAF;
}

/* line 150, ../scss/dancing_beans.scss */
svg * {
  transform: scale(1, 1) translate(0, 0) rotate(0deg);
  transition: 0.2s ease-in-out;
  transform-origin: top left;
  -webkit-transform: scale(1, 1) translate(0, 0) rotate(0deg);
  -webkit-transition: 0.2s ease-in-out;
  -webkit-transform-origin: top left;
  -moz-transform-origin: 100px 100px;
}

/* line 173, ../scss/dancing_beans.scss */
.move .dancing * {
  animation-fill-mode: forwards;
  transform-origin: top left;
}
/* line 178, ../scss/dancing_beans.scss */
.move .dancing#bluebean .bean {
  animation: dancebean .8s infinite;
}
/* line 182, ../scss/dancing_beans.scss */
.move .dancing#bluebean .mouth {
  animation: dancemouth .8s infinite;
  -moz-transform-origin: 0 0;
}
/* line 187, ../scss/dancing_beans.scss */
.move .dancing#bluebean .right-leg {
  animation: danceright .8s infinite;
}
/* line 190, ../scss/dancing_beans.scss */
.move .dancing#bluebean .left-leg {
  animation: danceleft .8s infinite;
}

@keyframes dancebean {
  50% {
    transform: translate(0px, -4%);
    -moz-transform: translate(0px, -4%);
  }
}
@keyframes dancemouth {
  50% {
    -webkit-transform: scale(1.2, 1.6) translate(-12%, -32%);
    -moz-transform: scale(1.2, 1.6) translate(-12%, -32%);
    -ms-transform: scale(1.2, 1.6) translate(-12%, -32%);
    -o-transform: scale(1.2, 1.6) translate(-12%, -32%);
    transform: scale(1.2, 1.6) translate(-12%, -32%);
  }
}
@keyframes danceleft {
  50% {
    transform: scale(1, 1.3) translate(34%, -36%) rotate(20deg);
  }
}
@keyframes danceright {
  50% {
    transform: scale(1, 1.3) translate(-25%, -1%) rotate(-20deg);
  }
}
@-webkit-keyframes dancebean {
  50% {
    transform: translate(0%, -10px);
  }
}
@-webkit-keyframes dancemouth {}
@-webkit-keyframes danceleft {
  50% {
    transform: scale(1, 1.5) translate(50%, -53%) rotate(30deg);
  }
}
@-webkit-keyframes danceright {
  50% {
    transform: scale(1, 1.5) translate(-33%, 3%) rotate(-30deg);
  }
}
/* line 265, ../scss/dancing_beans.scss */
.note-1, .note-2 {
  position: absolute;
  top: 55%;
  left: 42%;
  display: none;
}

/* line 272, ../scss/dancing_beans.scss */
.whistle-box {
  position: relative;
}

/* line 277, ../scss/dancing_beans.scss */
.move .whistling svg * {
  animation-fill-mode: forwards;
  transform-origin: top left;
}
/* line 282, ../scss/dancing_beans.scss */
.move .whistling span {
  opacity: 0;
  display: block;
  width: 20%;
  height: 20%;
  text-align: right;
  font-size: 3vw;
}
/* line 291, ../scss/dancing_beans.scss */
.move .whistling .note-1 {
  animation: notes 2s infinite;
  animation-delay: .4s;
}
/* line 295, ../scss/dancing_beans.scss */
.move .whistling .note-2 {
  animation: notes 2s infinite;
  animation-delay: .9s;
}
/* line 301, ../scss/dancing_beans.scss */
.move .whistling #orangebean .bean {
  animation: twist 2s infinite;
}
/* line 305, ../scss/dancing_beans.scss */
.move .whistling #orangebean .mouth {
  animation: whistlemouth 2s infinite;
}

@keyframes whistlemouth {
  10%,75% {
    transform: scale(0.1, 0.2) skew(-50deg, 40deg);
  }
  85%,100% {
    transform: scale(1, 1) skew(0deg, 0deg);
  }
}
@keyframes twist {
  10%,75% {
    transform: rotate(-3deg);
  }
  85%,100% {
    transform: rotate(0);
  }
}
@keyframes notes {
  0% {
    opacity: 0;
    font-size: 1vw;
    transform: translate(-90%, -35%);
  }
  45% {
    opacity: 1;
  }
  55% {
    transform: translate(-205%, -260%);
  }
  60% {
    opacity: 0;
    font-size: 3vw;
  }
  90% {
    transform: translate(-270%, -425%);
    font-size: 1vw;
  }
}
/* line 364, ../scss/dancing_beans.scss */
.move .shaking * {
  animation-fill-mode: forwards;
  transform-origin: top left;
}
/* line 369, ../scss/dancing_beans.scss */
.move .shaking#purplebean .bean, .move .shaking#purplebean .mouth {
  animation: shakeit 2.5s infinite;
}

@keyframes shakeit {
  0%,10% {
    transform: translate(0, 0);
  }
  15%,20% {
    transform: translate(-20px, -10px) rotate(8deg);
  }
  25%,30% {
    transform: translate(0, 0) rotate(0deg);
  }
  35%,40% {
    transform: translate(-20px, -10px) rotate(8deg);
  }
  45%,60% {
    transform: translate(0, 0) rotate(0deg);
  }
  65%,70% {
    transform: translate(20px, 20px) rotate(-5deg);
  }
  75%,80% {
    transform: translate(0, 0) rotate(0deg);
  }
  85%,90% {
    transform: translate(20px, 20px) rotate(-5deg);
  }
  95%,100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
/* line 407, ../scss/dancing_beans.scss */
.spark-box {
  position: relative;
}

/* line 411, ../scss/dancing_beans.scss */
.sparks {
  position: absolute;
  font-size: 2.5vw;
  right: 32%;
  top: 45%;
  opacity: 0;
}

/* line 421, ../scss/dancing_beans.scss */
.move .jumping svg * {
  animation-fill-mode: forwards;
  transform-origin: top left;
}
/* line 425, ../scss/dancing_beans.scss */
.move .jumping svg#lightbluebean {
  animation: liftoff 2s infinite;
}
/* line 427, ../scss/dancing_beans.scss */
.move .jumping svg#lightbluebean .left-foot {
  animation: clickleft 2s infinite;
}
/* line 430, ../scss/dancing_beans.scss */
.move .jumping svg#lightbluebean .left-leg {
  animation: clickleftleg 2s infinite;
}
/* line 433, ../scss/dancing_beans.scss */
.move .jumping svg#lightbluebean .bean {
  animation: crouch 2s infinite;
}
/* line 436, ../scss/dancing_beans.scss */
.move .jumping svg#lightbluebean .mouth {
  animation: jumpmouth 2s infinite;
}
/* line 441, ../scss/dancing_beans.scss */
.move .jumping .sparks {
  animation: sparkfade 2s infinite;
}

@keyframes liftoff {
  0%,10% {
    transform: translate(0, 0);
  }
  15%,25% {
    transform: translate(-5%, -20%) rotate(-20deg);
  }
  55%,100% {
    transform: translate(0, 0);
  }
}
@keyframes crouch {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, 0);
  }
  70% {
    transform: translate(0, 10%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes clickleft {
  0%,36% {
    transform: translate(0, 0) rotate(0deg);
  }
  36%,38% {
    transform: translate(110%, 95%) rotate(-25deg);
  }
  42%,100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes clickleftleg {
  0%,36% {
    transform: translate(0, 0) rotate(0deg);
  }
  36%,38% {
    transform: translate(34%, 30%) rotate(-20deg);
  }
  42%,100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes sparkfade {
  0%,18% {
    opacity: 0;
    transform: rotate(20deg);
  }
  25% {
    opacity: 1;
    transform: rotate(20deg);
  }
  70%,100% {
    opacity: 0;
    transform: translate(170%, -50%) rotate(20deg);
  }
}
@keyframes jumpmouth {
  0%,10% {
    -webkit-transform: scale(0.5, 0.2) translate(52%, 95%);
    -moz-transform: scale(0.5, 0.2) translate(52%, 95%);
    -ms-transform: scale(0.5, 0.2) translate(52%, 95%);
    -o-transform: scale(0.5, 0.2) translate(52%, 95%);
    transform: scale(0.5, 0.2) translate(52%, 95%);
  }
  20%,75% {
    -webkit-transform: scale(1, 1) translate(0, 0);
    -moz-transform: scale(1, 1) translate(0, 0);
    -ms-transform: scale(1, 1) translate(0, 0);
    -o-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }
  90%,100% {
    -webkit-transform: scale(0.5, 0.2) translate(52%, 95%);
    -moz-transform: scale(0.5, 0.2) translate(52%, 95%);
    -ms-transform: scale(0.5, 0.2) translate(52%, 95%);
    -o-transform: scale(0.5, 0.2) translate(52%, 95%);
    transform: scale(0.5, 0.2) translate(52%, 95%);
  }
}