body {background-color:#cfaf86;  background: url(bg1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.butterfliesComplete {opacity: 0; right: 5;  position: fixed;  margin-top: 17%;  z-index: 0;}

.result_off {opacity: 0;
-webkit-animation: getoffme 1s 1 ease-in-out; /* Safari 4+ */
  -moz-animation:    getoffme 1s 1 ease-in-out; /* Fx 5+ */
  -o-animation:      getoffme 1s 1 ease-in-out; /* Opera 12+ */
  animation:         getoffme 1s 1 ease-in-out; /* IE 10+, Fx 29+ */
 animation-timing-function:ease-in-out;}

@-webkit-keyframes getoffme {
  0%   {opacity: 1;  }
  100% { opacity: 0; }
}
@-moz-keyframes getoffme {
  0%   {opacity: 1;  }
  100% { opacity: 0; }
}
@-o-keyframes getoffme {
  0%   {opacity: 1;  }
  100% { opacity: 0; }
}
@keyframes getoffme {
  0%   {opacity: 1;  }
  100% { opacity: 0; }
}

.result_hover {opacity: 1;
-webkit-animation: highlighThis 1s 1 ease-in-out; /* Safari 4+ */
  -moz-animation:    highlighThis 1s 1 ease-in-out; /* Fx 5+ */
  -o-animation:      highlighThis 1s 1 ease-in-out; /* Opera 12+ */
  animation:         highlighThis 1s 1 ease-in-out; /* IE 10+, Fx 29+ */
 animation-timing-function:ease-in-out;}

@-webkit-keyframes highlighThis {
  0%   {opacity: 0;  }
  100% { opacity: 1; }
}
@-moz-keyframes highlighThis {
  0%   {opacity: 0;  }
  100% { opacity: 1; }
}
@-o-keyframes highlighThis {
  0%   {opacity: 0;  }
  100% { opacity: 1; }
}
@keyframes highlighThis {
  0%   {opacity: 0;  }
  100% { opacity: 1; }
}

@-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;
}

.borboleta-3 {
  -moz-animation: borboleta-radial-loop 20s linear infinite;
  -webkit-animation: borboleta-radial-loop 20s linear infinite;
  animation: borboleta-radial-loop 20s linear infinite;
}

.borboleta-4 {
  -moz-animation: borboleta-radial-loop 25s linear infinite;
  -webkit-animation: borboleta-radial-loop 25s linear infinite;
  animation: borboleta-radial-loop 25s 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-3 .borboleta-oval {
  -moz-animation: borboleta-radial-loop 1.8s linear infinite;
  -webkit-animation: borboleta-radial-loop 1.8s linear infinite;
  animation: borboleta-radial-loop 1.8s linear infinite;
}

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

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

.borboleta-4 .borboleta-radial {
  -moz-animation: borboleta-oval-loop 2s linear infinite;
  -webkit-animation: borboleta-oval-loop 2s linear infinite;
  animation: borboleta-oval-loop 2s 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;
}

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

.borboleta-4 .borboleta-gfx {
  -moz-animation: borboleta-gfx-upright-loop 25s linear infinite;
  -webkit-animation: borboleta-gfx-upright-loop 25s linear infinite;
  animation: borboleta-gfx-upright-loop 25s 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%, #9dbbed 50%, rgba(255, 255, 255, 0) 50%), radial-gradient(closest-side at 50% 50%, #9dbbed 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-2 .borboleta-anim {
  background: radial-gradient(closest-side at 50% 50%, #f4abe5 50%, rgba(255, 255, 255, 0) 50%), radial-gradient(closest-side at 50% 50%, #f4abe5 50%, rgba(255, 255, 255, 0) 50%)
}
.borboleta-3 .borboleta-anim {
  background: radial-gradient(closest-side at 50% 50%, #ff8e42 50%, rgba(255, 255, 255, 0) 50%), radial-gradient(closest-side at 50% 50%, #ff8e42 50%, rgba(255, 255, 255, 0) 50%)
}

.borboleta-4 .borboleta-anim {
  background: radial-gradient(closest-side at 50% 50%, #c4fbfa 50%, rgba(255, 255, 255, 0) 50%), radial-gradient(closest-side at 50% 50%, #c4fbfa 50%, rgba(255, 255, 255, 0) 50%)
}