/* Smoke container */
#smoke {
  position: absolute;
  z-index: 3;
  width: 1px;
  height: 160px;
  left:47%;
  bottom: 162px;
}

/* No animations? Display a static smoke image */
.disableAnimations #smoke,
.no-cssanimations #smoke {
  width: 86px;
  margin-left: -25px;
  bottom: 146px;
  background: url("../img/smokeNoAni.png") no-repeat center bottom;
}

/* smoke balls */
.cssanimations #smoke span {
  display: block;
  position: absolute;
  bottom: -35px;
  /*left: 50%;*/
  margin-left: -20px;
  height: 0px;
  width: 0px;
  border: 35px solid #ffe0aa;
  border-radius: 35px;
  left: -14px;
  opacity: 0;
  transform: scale(0.2);
}

/*@media (max-width: 750px) {
   .cssanimations #smoke {
        left:47%;
    }
}*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 750px) {
   .cssanimations #smoke {
        left:343px;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 970px) {
   .cssanimations #smoke {
        left:50%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1170px) { 
    .cssanimations #smoke {
        left:45%;
    }
}




/* Smoke animation */
@-webkit-keyframes smokeL {
  0% {
    -webkit-transform: scale(0.2) translate(0, 0);
    -moz-transform: scale(0.2) translate(0, 0);
    -ms-transform: scale(0.2) translate(0, 0);
    -o-transform: scale(0.2) translate(0, 0);
    transform: scale(0.2) translate(0, 0);
  }

  10% {
    opacity: 1;
    -webkit-transform: scale(0.2) translate(0, -5px);
    -moz-transform: scale(0.2) translate(0, -5px);
    -ms-transform: scale(0.2) translate(0, -5px);
    -o-transform: scale(0.2) translate(0, -5px);
    transform: scale(0.2) translate(0, -5px);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) translate(-20px, -130px);
    -moz-transform: scale(1) translate(-20px, -130px);
    -ms-transform: scale(1) translate(-20px, -130px);
    -o-transform: scale(1) translate(-20px, -130px);
    transform: scale(1) translate(-20px, -130px);
  }
}

@-moz-keyframes smokeL {
  0% {
    -webkit-transform: scale(0.2) translate(0, 0);
    -moz-transform: scale(0.2) translate(0, 0);
    -ms-transform: scale(0.2) translate(0, 0);
    -o-transform: scale(0.2) translate(0, 0);
    transform: scale(0.2) translate(0, 0);
  }

  10% {
    opacity: 1;
    -webkit-transform: scale(0.2) translate(0, -5px);
    -moz-transform: scale(0.2) translate(0, -5px);
    -ms-transform: scale(0.2) translate(0, -5px);
    -o-transform: scale(0.2) translate(0, -5px);
    transform: scale(0.2) translate(0, -5px);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) translate(-20px, -130px);
    -moz-transform: scale(1) translate(-20px, -130px);
    -ms-transform: scale(1) translate(-20px, -130px);
    -o-transform: scale(1) translate(-20px, -130px);
    transform: scale(1) translate(-20px, -130px);
  }
}

@-o-keyframes smokeL {
  0% {
    -webkit-transform: scale(0.2) translate(0, 0);
    -moz-transform: scale(0.2) translate(0, 0);
    -ms-transform: scale(0.2) translate(0, 0);
    -o-transform: scale(0.2) translate(0, 0);
    transform: scale(0.2) translate(0, 0);
  }

  10% {
    opacity: 1;
    -webkit-transform: scale(0.2) translate(0, -5px);
    -moz-transform: scale(0.2) translate(0, -5px);
    -ms-transform: scale(0.2) translate(0, -5px);
    -o-transform: scale(0.2) translate(0, -5px);
    transform: scale(0.2) translate(0, -5px);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) translate(-20px, -130px);
    -moz-transform: scale(1) translate(-20px, -130px);
    -ms-transform: scale(1) translate(-20px, -130px);
    -o-transform: scale(1) translate(-20px, -130px);
    transform: scale(1) translate(-20px, -130px);
  }
}

@keyframes smokeL {
  0% {
    -webkit-transform: scale(0.2) translate(0, 0);
    -moz-transform: scale(0.2) translate(0, 0);
    -ms-transform: scale(0.2) translate(0, 0);
    -o-transform: scale(0.2) translate(0, 0);
    transform: scale(0.2) translate(0, 0);
  }

  10% {
    opacity: 1;
    -webkit-transform: scale(0.2) translate(0, -5px);
    -moz-transform: scale(0.2) translate(0, -5px);
    -ms-transform: scale(0.2) translate(0, -5px);
    -o-transform: scale(0.2) translate(0, -5px);
    transform: scale(0.2) translate(0, -5px);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) translate(-20px, -130px);
    -moz-transform: scale(1) translate(-20px, -130px);
    -ms-transform: scale(1) translate(-20px, -130px);
    -o-transform: scale(1) translate(-20px, -130px);
    transform: scale(1) translate(-20px, -130px);
  }
}

@-webkit-keyframes smokeR {
  0% {
    -webkit-transform: scale(0.2) translate(0, 0);
    -moz-transform: scale(0.2) translate(0, 0);
    -ms-transform: scale(0.2) translate(0, 0);
    -o-transform: scale(0.2) translate(0, 0);
    transform: scale(0.2) translate(0, 0);
  }

  10% {
    opacity: 1;
    -webkit-transform: scale(0.2) translate(0, -5px);
    -moz-transform: scale(0.2) translate(0, -5px);
    -ms-transform: scale(0.2) translate(0, -5px);
    -o-transform: scale(0.2) translate(0, -5px);
    transform: scale(0.2) translate(0, -5px);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) translate(20px, -130px);
    -moz-transform: scale(1) translate(20px, -130px);
    -ms-transform: scale(1) translate(20px, -130px);
    -o-transform: scale(1) translate(20px, -130px);
    transform: scale(1) translate(20px, -130px);
  }
}

@-moz-keyframes smokeR {
  0% {
    -webkit-transform: scale(0.2) translate(0, 0);
    -moz-transform: scale(0.2) translate(0, 0);
    -ms-transform: scale(0.2) translate(0, 0);
    -o-transform: scale(0.2) translate(0, 0);
    transform: scale(0.2) translate(0, 0);
  }

  10% {
    opacity: 1;
    -webkit-transform: scale(0.2) translate(0, -5px);
    -moz-transform: scale(0.2) translate(0, -5px);
    -ms-transform: scale(0.2) translate(0, -5px);
    -o-transform: scale(0.2) translate(0, -5px);
    transform: scale(0.2) translate(0, -5px);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) translate(20px, -130px);
    -moz-transform: scale(1) translate(20px, -130px);
    -ms-transform: scale(1) translate(20px, -130px);
    -o-transform: scale(1) translate(20px, -130px);
    transform: scale(1) translate(20px, -130px);
  }
}

@-o-keyframes smokeR {
  0% {
    -webkit-transform: scale(0.2) translate(0, 0);
    -moz-transform: scale(0.2) translate(0, 0);
    -ms-transform: scale(0.2) translate(0, 0);
    -o-transform: scale(0.2) translate(0, 0);
    transform: scale(0.2) translate(0, 0);
  }

  10% {
    opacity: 1;
    -webkit-transform: scale(0.2) translate(0, -5px);
    -moz-transform: scale(0.2) translate(0, -5px);
    -ms-transform: scale(0.2) translate(0, -5px);
    -o-transform: scale(0.2) translate(0, -5px);
    transform: scale(0.2) translate(0, -5px);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) translate(20px, -130px);
    -moz-transform: scale(1) translate(20px, -130px);
    -ms-transform: scale(1) translate(20px, -130px);
    -o-transform: scale(1) translate(20px, -130px);
    transform: scale(1) translate(20px, -130px);
  }
}

@keyframes smokeR {
  0% {
    -webkit-transform: scale(0.2) translate(0, 0);
    -moz-transform: scale(0.2) translate(0, 0);
    -ms-transform: scale(0.2) translate(0, 0);
    -o-transform: scale(0.2) translate(0, 0);
    transform: scale(0.2) translate(0, 0);
  }

  10% {
    opacity: 1;
    -webkit-transform: scale(0.2) translate(0, -5px);
    -moz-transform: scale(0.2) translate(0, -5px);
    -ms-transform: scale(0.2) translate(0, -5px);
    -o-transform: scale(0.2) translate(0, -5px);
    transform: scale(0.2) translate(0, -5px);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) translate(20px, -130px);
    -moz-transform: scale(1) translate(20px, -130px);
    -ms-transform: scale(1) translate(20px, -130px);
    -o-transform: scale(1) translate(20px, -130px);
    transform: scale(1) translate(20px, -130px);
  }
}

#smoke .s0 {
  -webkit-animation: smokeL 10s 0s infinite;
  -moz-animation: smokeL 10s 0s infinite;
  -o-animation: smokeL 10s 0s infinite;
  animation: smokeL 10s 0s infinite;
}

#smoke .s1 {
  -webkit-animation: smokeR 10s 1s infinite;
  -moz-animation: smokeR 10s 1s infinite;
  -o-animation: smokeR 10s 1s infinite;
  animation: smokeR 10s 1s infinite;
}

#smoke .s2 {
  -webkit-animation: smokeL 10s 2s infinite;
  -moz-animation: smokeL 10s 2s infinite;
  -o-animation: smokeL 10s 2s infinite;
  animation: smokeL 10s 2s infinite;
}

#smoke .s3 {
  -webkit-animation: smokeR 10s 3s infinite;
  -moz-animation: smokeR 10s 3s infinite;
  -o-animation: smokeR 10s 3s infinite;
  animation: smokeR 10s 3s infinite;
}

#smoke .s4 {
  -webkit-animation: smokeL 10s 4s infinite;
  -moz-animation: smokeL 10s 4s infinite;
  -o-animation: smokeL 10s 4s infinite;
  animation: smokeL 10s 4s infinite;
}

#smoke .s5 {
  -webkit-animation: smokeR 10s 5s infinite;
  -moz-animation: smokeR 10s 5s infinite;
  -o-animation: smokeR 10s 5s infinite;
  animation: smokeR 10s 5s infinite;
}

#smoke .s6 {
  -webkit-animation: smokeL 10s 6s infinite;
  -moz-animation: smokeL 10s 6s infinite;
  -o-animation: smokeL 10s 6s infinite;
  animation: smokeL 10s 6s infinite;
}

#smoke .s7 {
  -webkit-animation: smokeR 10s 7s infinite;
  -moz-animation: smokeR 10s 7s infinite;
  -o-animation: smokeR 10s 7s infinite;
  animation: smokeR 10s 7s infinite;
}

#smoke .s8 {
  -webkit-animation: smokeL 10s 8s infinite;
  -moz-animation: smokeL 10s 8s infinite;
  -o-animation: smokeL 10s 8s infinite;
  animation: smokeL 10s 8s infinite;
}

#smoke .s9 {
  -webkit-animation: smokeR 10s 9s infinite;
  -moz-animation: smokeR 10s 9s infinite;
  -o-animation: smokeR 10s 9s infinite;
  animation: smokeR 10s 9s infinite;
}