@-moz-keyframes borboletas-pos-loop {
  0% {
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  25% {
    -moz-transform: translate(100px, 0);
    transform: translate(100px, 0);
  }
  50% {
    -moz-transform: translate(30px, -70px);
    transform: translate(30px, -70px);
  }
  75% {
    -moz-transform: translate(0px, 20px);
    transform: translate(0px, 20px);
  }
  100% {
    -moz-transform: translate(-100px, -50px);
    transform: translate(-100px, -50px);
  }
}
@-webkit-keyframes borboletas-pos-loop {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
  }
  50% {
    -webkit-transform: translate(30px, -70px);
    transform: translate(30px, -70px);
  }
  75% {
    -webkit-transform: translate(0px, 20px);
    transform: translate(0px, 20px);
  }
  100% {
    -webkit-transform: translate(-100px, -50px);
    transform: translate(-100px, -50px);
  }
}
@keyframes borboletas-pos-loop {
  0% {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  25% {
    -moz-transform: translate(100px, 0);
    -ms-transform: translate(100px, 0);
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
  }
  50% {
    -moz-transform: translate(30px, -70px);
    -ms-transform: translate(30px, -70px);
    -webkit-transform: translate(30px, -70px);
    transform: translate(30px, -70px);
  }
  75% {
    -moz-transform: translate(0px, 20px);
    -ms-transform: translate(0px, 20px);
    -webkit-transform: translate(0px, 20px);
    transform: translate(0px, 20px);
  }
  100% {
    -moz-transform: translate(-100px, -50px);
    -ms-transform: translate(-100px, -50px);
    -webkit-transform: translate(-100px, -50px);
    transform: translate(-100px, -50px);
  }
}
.borboletas {
  position: absolute;
  left: 20%;
  bottom: 100px;
  -moz-animation: borboletas-pos-loop 7s ease-in-out infinite alternate-reverse;
  -webkit-animation: borboletas-pos-loop 7s ease-in-out infinite alternate-reverse;
  /*animation: borboletas-pos-loop 7s ease-in-out infinite alternate-reverse;*/
}

.borboleta-oval-squish {
  -moz-transform: scale(0.3, 1);
  -ms-transform: scale(0.3, 1);
  -webkit-transform: scale(0.3, 1);
  transform: scale(0.3, 1);
}

@-moz-keyframes borboleta-radial-loop {
  0% {
    -moz-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes borboleta-radial-loop {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes borboleta-radial-loop {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.borboleta-1 {
  -moz-animation: borboleta-radial-loop 10s linear infinite;
  -webkit-animation: borboleta-radial-loop 10s linear infinite;
  animation: borboleta-radial-loop 10s linear infinite;
}

.borboleta-2 {
  -moz-animation: borboleta-radial-loop 15s linear infinite;
  -webkit-animation: borboleta-radial-loop 15s linear infinite;
  animation: borboleta-radial-loop 15s linear infinite;
}

@-moz-keyframes borboleta-oval-loop {
  0% {
    -moz-transform: rotate(0) scale(3.3, 1);
    transform: rotate(0) scale(3.3, 1);
  }
  100% {
    -moz-transform: rotate(-360deg) scale(3.3, 1);
    transform: rotate(-360deg) scale(3.3, 1);
  }
}
@-webkit-keyframes borboleta-oval-loop {
  0% {
    -webkit-transform: rotate(0) scale(3.3, 1);
    transform: rotate(0) scale(3.3, 1);
  }
  100% {
    -webkit-transform: rotate(-360deg) scale(3.3, 1);
    transform: rotate(-360deg) scale(3.3, 1);
  }
}
@keyframes borboleta-oval-loop {
  0% {
    -moz-transform: rotate(0) scale(3.3, 1);
    -ms-transform: rotate(0) scale(3.3, 1);
    -webkit-transform: rotate(0) scale(3.3, 1);
    transform: rotate(0) scale(3.3, 1);
  }
  100% {
    -moz-transform: rotate(-360deg) scale(3.3, 1);
    -ms-transform: rotate(-360deg) scale(3.3, 1);
    -webkit-transform: rotate(-360deg) scale(3.3, 1);
    transform: rotate(-360deg) scale(3.3, 1);
  }
}
.borboleta-oval {
  position: absolute;
  -moz-animation: borboleta-radial-loop 1.2s linear infinite;
  -webkit-animation: borboleta-radial-loop 1.2s linear infinite;
  animation: borboleta-radial-loop 1.2s linear infinite;
}

.borboleta-radial {
  position: absolute;
  left: 80px;
  top: 0;
  -moz-animation: borboleta-oval-loop 1.2s linear infinite;
  -webkit-animation: borboleta-oval-loop 1.2s linear infinite;
  animation: borboleta-oval-loop 1.2s linear infinite;
}

.borboleta-2 .borboleta-oval {
  -moz-animation: borboleta-radial-loop 1.5s linear infinite;
  -webkit-animation: borboleta-radial-loop 1.5s linear infinite;
  animation: borboleta-radial-loop 1.5s linear infinite;
}

.borboleta-2 .borboleta-radial {
  -moz-animation: borboleta-oval-loop 1.5s linear infinite;
  -webkit-animation: borboleta-oval-loop 1.5s linear infinite;
  animation: borboleta-oval-loop 1.5s linear infinite;
}

.borboleta-gfx {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 20px;
}

@-moz-keyframes borboleta-gfx-upright-loop {
  0% {
    -moz-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes borboleta-gfx-upright-loop {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes borboleta-gfx-upright-loop {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.borboleta-1 .borboleta-gfx {
  -moz-animation: borboleta-gfx-upright-loop 10s linear infinite;
  -webkit-animation: borboleta-gfx-upright-loop 10s linear infinite;
  animation: borboleta-gfx-upright-loop 10s linear infinite;
}

.borboleta-2 .borboleta-gfx {
  -moz-animation: borboleta-gfx-upright-loop 15s linear infinite;
  -webkit-animation: borboleta-gfx-upright-loop 15s linear infinite;
  animation: borboleta-gfx-upright-loop 15s linear infinite;
}

@-moz-keyframes borboleta-anim-loop {
  0% {
    -moz-transform: scale(1, 1.2) rotate(40deg);
    transform: scale(1, 1.2) rotate(40deg);
  }
  100% {
    -moz-transform: scale(0.7, -1) rotate(-40deg);
    transform: scale(0.7, -1) rotate(-40deg);
  }
}
@-webkit-keyframes borboleta-anim-loop {
  0% {
    -webkit-transform: scale(1, 1.2) rotate(40deg);
    transform: scale(1, 1.2) rotate(40deg);
  }
  100% {
    -webkit-transform: scale(0.7, -1) rotate(-40deg);
    transform: scale(0.7, -1) rotate(-40deg);
  }
}
@keyframes borboleta-anim-loop {
  0% {
    -moz-transform: scale(1, 1.2) rotate(40deg);
    -ms-transform: scale(1, 1.2) rotate(40deg);
    -webkit-transform: scale(1, 1.2) rotate(40deg);
    transform: scale(1, 1.2) rotate(40deg);
  }
  100% {
    -moz-transform: scale(0.7, -1) rotate(-40deg);
    -ms-transform: scale(0.7, -1) rotate(-40deg);
    -webkit-transform: scale(0.7, -1) rotate(-40deg);
    transform: scale(0.7, -1) rotate(-40deg);
  }
}
.borboleta-anim {
  background: radial-gradient(closest-side at 50% 50%, #ffffff 50%, rgba(255, 255, 255, 0) 50%), radial-gradient(closest-side at 50% 50%, #ffffff 50%, rgba(255, 255, 255, 0) 50%);
  background-repeat: no-repeat;
  background-size: 90% 70%,100% 70%;
  background-position: 20% -40%,0 40%;
  width: 25px;
  height: 20px;
  -moz-animation: borboleta-anim-loop 150ms ease-in-out infinite alternate-reverse;
  -webkit-animation: borboleta-anim-loop 150ms ease-in-out infinite alternate-reverse;
  animation: borboleta-anim-loop 150ms ease-in-out infinite alternate-reverse;
}
.borboleta-animg {
  background: radial-gradient(closest-side at 50% 50%, #ffffff 50%, rgba(255, 255, 255, 0) 50%), radial-gradient(closest-side at 50% 50%, #ffffff 50%, rgba(255, 255, 255, 0) 50%);
  background-repeat: no-repeat;
  background-size: 90% 70%,100% 70%;
  background-position: 20% -40%,0 40%;
  width: 35px;
  height: 30px;
  -moz-animation: borboleta-anim-loop 150ms ease-in-out infinite alternate-reverse;
  -webkit-animation: borboleta-anim-loop 150ms ease-in-out infinite alternate-reverse;
  animation: borboleta-anim-loop 150ms ease-in-out infinite alternate-reverse;
}